[FIX] composer: hide Fx icon when composer has a placeholder

src/components/composer/top_bar_composer/top_bar_composer.ts

@@ -65,7 +65,11 @@ export class TopBarComposer extends Component<any, SpreadsheetChildEnv> {
   }
 
   get showFxIcon(): boolean {
-    return this.focus === "inactive" && !this.composerStore.currentContent;
+    return (
+      this.focus === "inactive" &&
+      !this.composerStore.currentContent &&
+      !this.composerStore.placeholder
+    );
   }
 
   get composerStyle(): string {

src/components/small_bottom_bar/small_bottom_bar.ts

@@ -73,7 +73,11 @@ export class SmallBottomBar extends Component<Props, SpreadsheetChildEnv> {
   }
 
   get showFxIcon(): boolean {
-    return this.focus === "inactive" && !this.composerStore.currentContent;
+    return (
+      this.focus === "inactive" &&
+      !this.composerStore.currentContent &&
+      !this.composerStore.placeholder
+    );
   }
 
   get rect(): Rect {
@@ -102,6 +106,7 @@ export class SmallBottomBar extends Component<Props, SpreadsheetChildEnv> {
         "max-height": `130px`,
       }),
       showAssistant: !isIOS(), // Hide assistant on iOS as it breaks visually
+      placeholder: this.composerStore.placeholder,
     };
   }
 

tests/bottom_bar/small_bottom_bar_component.test.ts

@@ -1,5 +1,5 @@
 import { Model } from "../../src";
-import { setCellContent } from "../test_helpers/commands_helpers";
+import { selectCell, setCellContent } from "../test_helpers/commands_helpers";
 import { click } from "../test_helpers/dom_helper";
 import { getCellText } from "../test_helpers/getters_helpers";
 import {
@@ -47,6 +47,16 @@ describe("Small Bottom Bar", () => {
       await click(fixture, ".o-spreadsheet-editor-symbol[title='-']");
       expect(composerEl.textContent).toBe("=(-");
     });
+
+    test("Spreaded cell has no value in the composer but has a placeholder", async () => {
+      setCellContent(model, "A1", "=MUNIT(3)");
+      selectCell(model, "A2");
+      await nextTick();
+
+      expect(".o-small-composer .o-composer").toHaveText("");
+      expect(".o-small-composer .o-composer").toHaveAttribute("placeholder", "=MUNIT(3)");
+      expect(".o-small-composer .o-icon").toHaveCount(0);
+    });
   });
 
   describe("Ribbon Menu", () => {

tests/composer/composer_integration_component.test.ts

@@ -854,16 +854,29 @@ describe("TopBar composer", () => {
     selectCell(model, "A2");
     await nextTick();
 
-    const topBarComposer = document.querySelector(".o-spreadsheet-topbar .o-composer")!;
-    expect(topBarComposer.textContent).toBe("");
-    expect(topBarComposer.attributes.getNamedItem("placeholder")?.value).toEqual("=MUNIT(3)");
+    expect(".o-topbar-composer .o-composer").toHaveText("");
+    expect(".o-topbar-composer .o-composer").toHaveAttribute("placeholder", "=MUNIT(3)");
+    expect(".o-topbar-composer .o-icon").toHaveCount(0);
 
-    await simulateClick(topBarComposer);
-    expect(topBarComposer!.textContent).toBe("");
+    await simulateClick(".o-topbar-composer .o-composer");
+    expect(".o-topbar-composer .o-composer").toHaveText("");
+    expect(".o-topbar-composer .o-icon").toHaveCount(0);
 
     await keyDown({ key: "Enter" });
-    expect(topBarComposer!.textContent).toBe("");
-    expect(topBarComposer.attributes.getNamedItem("placeholder")?.value).toEqual("=MUNIT(3)");
+    expect(".o-topbar-composer .o-composer").toHaveText("");
+    expect(".o-topbar-composer .o-composer").toHaveAttribute("placeholder", "=MUNIT(3)");
+    expect(".o-topbar-composer .o-icon").toHaveCount(0);
+  });
+
+  test("Fx icon is not shown in spreaded cell results", async () => {
+    ({ model, fixture } = await mountSpreadsheet());
+    setCellContent(model, "A1", "=MUNIT(3)");
+    selectCell(model, "A2");
+    await nextTick();
+
+    expect(".o-spreadsheet-topbar .o-composer").toHaveText("");
+    expect(".o-spreadsheet-topbar .o-composer").toHaveAttribute("placeholder", "=MUNIT(3)");
+    expect(".o-topbar-composer .o-icon").toHaveCount(0);
   });
 
   test("Spreaded cell placeholder follows the current locale", async () => {