[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 #5321 Task: 4246966 X-original-commit: a70d1c0 Signed-off-by: Rémi Rahir (rar) <[email protected]> Signed-off-by: Adrien Minne (adrm) <[email protected]>
odoo · Dec 6, 2024 · 4ec1734 · 4ec1734
1 parent 8344531
commit 4ec1734
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/src/components/composer/top_bar_composer/top_bar_composer.ts b/src/components/composer/top_bar_composer/top_bar_composer.ts
@@ -25,7 +25,6 @@ css/* scss */ `
     height: fit-content;
     margin-top: -1px;
     border: 1px solid;
-    z-index: ${ComponentsImportance.TopBarComposer};
 
     .o-composer:empty:not(:focus):not(.active)::before {
       content: url("data:image/svg+xml,${encodeURIComponent(FX_SVG)}");
@@ -67,6 +66,7 @@ export class TopBarComposer extends Component<Props, 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
@@ -196,7 +196,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, {}, "thisIsAnId");