diff --git a/src/components/composer/composer/composer.ts b/src/components/composer/composer/composer.ts
index ca642abff4..1579b02aa9 100644
--- a/src/components/composer/composer/composer.ts
+++ b/src/components/composer/composer/composer.ts
@@ -86,11 +86,11 @@ css/* scss */ `
   }
 
   /* Custom css to highlight topbar composer on focus */
-  .o-topbar-toolbar .o-composer-container:focus-within {
-    border: 1px solid ${SELECTION_BORDER_COLOR};
+  .o-topbar-toolbar .o-composer-container[active] {
+    border: 1px solid ${SELECTION_BORDER_COLOR} !important;
   }
 
-  .o-topbar-toolbar .o-composer-container {
+  .o-topbar-toolbar .o-composer-container[active] {
     z-index: ${ComponentsImportance.TopBarComposer};
   }
 `;
diff --git a/src/components/composer/composer/composer.xml b/src/components/composer/composer/composer.xml
index d12aaa6a2b..fe037336c8 100644
--- a/src/components/composer/composer/composer.xml
+++ b/src/components/composer/composer/composer.xml
@@ -1,6 +1,6 @@
 <templates>
   <t t-name="o-spreadsheet-Composer" owl="1">
-    <div class="o-composer-container">
+    <div class="o-composer-container" t-att-active="props.focus !== 'inactive'">
       <div
         t-att-class="{ 'o-composer': true, 'text-muted': env.model.getters.isReadonly(), 'unfocusable': env.model.getters.isReadonly() }"
         t-att-style="props.inputStyle"
diff --git a/tests/components/spreadsheet.test.ts b/tests/components/spreadsheet.test.ts
index e18de0967a..09c7775fd1 100644
--- a/tests/components/spreadsheet.test.ts
+++ b/tests/components/spreadsheet.test.ts
@@ -272,7 +272,10 @@ describe("Simple Spreadsheet Component", () => {
     await typeInComposerGrid("=A1:B2");
     const gridComposerZIndex = getZIndex("div.o-grid-composer");
 
-    await typeInComposerTopBar("=SUM(A1,A2)");
+    const inactiveTopBarComposerZIndex = getZIndex(".o-topbar-toolbar .o-composer-container");
+    expect(inactiveTopBarComposerZIndex).toBe(0);
+
+    await simulateClick(".o-topbar-toolbar .o-composer");
     const topBarComposerZIndex = getZIndex(".o-topbar-toolbar .o-composer-container");
 
     const highlighZIndex = getZIndex(".o-highlight");