[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 #5330

Task: 4246966
X-original-commit: b6a0772
Signed-off-by: Adrien Minne (adrm) <[email protected]>
Signed-off-by: Rémi Rahir (rar) <[email protected]>

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),
     });
   }
 

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");