[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 #5325 Task: 4246966 X-original-commit: 4ec1734 Signed-off-by: Rémi Rahir (rar) <[email protected]> Signed-off-by: Adrien Minne (adrm) <[email protected]>
odoo · Dec 6, 2024 · c6924e6 · c6924e6
1 parent 9b13f22
commit c6924e6
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
@@ -26,7 +26,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)}");
@@ -74,6 +73,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
@@ -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, { type: "bar" }, "thisIsAnId");