[FIX] composer: topbar composer z-index

The topbar composer has a big z-index, so its formula assistant is displayed above the rest. But this z-index is useless when the composer is not focused. In fact, it causes problems in further versions where we end up with grid popovers being displayed below the composer. Also the css to color the border blue when the composer is focused wasn't working. closes #5256 Task: 4246966 Signed-off-by: Rémi Rahir (rar) <[email protected]>
odoo · Dec 5, 2024 · a70d1c0 · a70d1c0
1 parent 32459cb
commit a70d1c0
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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");