[FIX] auto-complete: hide auto-complete when selecting a cell

src/components/composer/autocomplete_dropdown/autocomplete_dropdown_store.ts

@@ -1,11 +1,20 @@
 import { AutoCompleteProposal, AutoCompleteProvider } from "../../../registries";
+import { Get } from "../../../store_engine";
 import { SpreadsheetStore } from "../../../stores";
 
 export class AutoCompleteStore extends SpreadsheetStore {
   mutators = ["useProvider", "moveSelection", "hide", "selectIndex"] as const;
   selectedIndex: number | undefined = undefined;
   provider: AutoCompleteProvider | undefined;
 
+  constructor(get: Get) {
+    super(get);
+    this.model.selection.observe(this, {
+      handleEvent: () => this.hide(),
+    });
+    this.onDispose(() => this.model.selection.stopWatching(this));
+  }
+
   get selectedProposal(): AutoCompleteProposal | undefined {
     if (this.selectedIndex === undefined || this.provider === undefined) {
       return undefined;

src/selection_stream/event_stream.ts

@@ -65,6 +65,10 @@ export class EventStream<Event> {
     this.observers.set(owner, { owner, callbacks });
   }
 
+  stopWatching(owner: Owner) {
+    this.observers.delete(owner);
+  }
+
   /**
    * Capture the stream for yourself
    */

src/selection_stream/selection_stream_processor.ts

@@ -31,6 +31,7 @@ type StatefulStream<Event, State> = {
   resetDefaultAnchor: (owner: unknown, state: State) => void;
   resetAnchor: (owner: unknown, state: State) => void;
   observe: (owner: unknown, callbacks: StreamCallbacks<Event>) => void;
+  stopWatching: (owner: unknown) => void;
   release: (owner: unknown) => void;
   getBackToDefault(): void;
 };
@@ -114,6 +115,10 @@ export class SelectionStreamProcessorImpl implements SelectionStreamProcessor {
     this.stream.observe(owner, callbacks);
   }
 
+  stopWatching(owner: unknown) {
+    this.stream.stopWatching(owner);
+  }
+
   release(owner: unknown) {
     if (this.stream.isListening(owner)) {
       this.stream.release(owner);

tests/composer/composer_integration_component.test.ts

@@ -37,6 +37,7 @@ import {
 import {
   getActivePosition,
   getActiveSheetFullScrollInfo,
+  getCell,
   getCellContent,
   getCellText,
   getSelectionAnchorCellXc,
@@ -50,6 +51,7 @@ import {
   typeInComposerGrid as typeInComposerGridHelper,
   typeInComposerTopBar as typeInComposerTopBarHelper,
 } from "../test_helpers/helpers";
+import { addPivot } from "../test_helpers/pivot_helpers";
 
 jest.mock("../../src/components/composer/content_editable_helper.ts", () =>
   require("../__mocks__/content_editable_helper")
@@ -154,6 +156,24 @@ describe("Composer interactions", () => {
     expect(fixture.querySelector(".o-grid .o-autocomplete-dropdown")).toBeNull();
   });
 
+  test("autocomplete disappear when selecting a cell in the grid", async () => {
+    setCellContent(model, "B1", "Customer");
+    setCellContent(model, "B2", "Alice");
+
+    addPivot(model, "B1:B2", {
+      columns: [],
+      rows: [],
+      measures: [{ name: "Customer", aggregator: "count" }],
+    });
+    await keyDown({ key: "Enter" });
+    await typeInComposerGrid("=PIVOT(");
+    expect(fixture.querySelector(".o-grid .o-autocomplete-dropdown")).not.toBeNull();
+    await clickCell(model, "B3");
+    expect(fixture.querySelector(".o-grid .o-autocomplete-dropdown")).toBeNull();
+    await keyDown({ key: "Enter" });
+    expect(getCell(model, "A1")?.content).toBe("=PIVOT(B3)");
+  });
+
   test("focus top bar composer does not resize grid composer when autocomplete is displayed", async () => {
     await keyDown({ key: "Enter" });
     const topBarComposer = document.querySelector(".o-spreadsheet-topbar .o-composer")!;