diff --git a/src/components/composer/top_bar_composer/top_bar_composer.ts b/src/components/composer/top_bar_composer/top_bar_composer.ts
index 2039efa57e..6011aad0db 100644
--- a/src/components/composer/top_bar_composer/top_bar_composer.ts
+++ b/src/components/composer/top_bar_composer/top_bar_composer.ts
@@ -28,7 +28,6 @@ css/* scss */ `
     height: fit-content;
     margin-top: -1px;
     border: 1px solid;
-    z-index: ${ComponentsImportance.TopBarComposer};
     font-family: ${DEFAULT_FONT};
 
     .o-composer:empty:not(:focus):not(.active)::before {
@@ -92,6 +91,7 @@ export class TopBarComposer extends Component<any, SpreadsheetChildEnv> {
     }
     return cssPropertiesToCss({
       "border-color": SELECTION_BORDER_COLOR,
+      "z-index": String(ComponentsImportance.TopBarComposer),
     });
   }
 
diff --git a/tests/spreadsheet/spreadsheet_component.test.ts b/tests/spreadsheet/spreadsheet_component.test.ts
index 37669f1fb5..fdf72fe4d7 100644
--- a/tests/spreadsheet/spreadsheet_component.test.ts
+++ b/tests/spreadsheet/spreadsheet_component.test.ts
@@ -208,7 +208,10 @@ describe("Simple Spreadsheet Component", () => {
     const gridComposerZIndex = getZIndex("div.o-grid-composer");
     const highlighZIndex = getZIndex(".o-highlight");
 
-    await typeInComposerTopBar("=SUM(A1,A2)");
+    const inactiveTopBarComposerZIndex = getZIndex(".o-topbar-composer .o-composer-container");
+    expect(inactiveTopBarComposerZIndex).toBe(0);
+
+    await simulateClick(".o-topbar-composer .o-composer");
     const topBarComposerZIndex = getZIndex(".o-topbar-composer");
 
     createChart(model, { type: "bar" }, "thisIsAnId");