[FIX] dataValidation: Display suggestions on dv-icon click

Following the fix for persistent composition, starting the edition of a
cell related to a data validation list would not display the values of
the list in the composer assistant.

closes #4089

Task: 3872312
Signed-off-by: Lucas Lefèvre (lul) <lul@odoo.com>

src/components/composer/composer/composer.ts

@@ -1,4 +1,4 @@
-import { Component, onMounted, onPatched, useEffect, useRef, useState } from "@odoo/owl";
+import { Component, onMounted, useEffect, useRef, useState } from "@odoo/owl";
 import { COMPOSER_ASSISTANT_COLOR, DEFAULT_FONT, NEWLINE } from "../../../constants";
 import { EnrichedToken } from "../../../formulas/index";
 import { functionRegistry } from "../../../functions/index";
@@ -221,19 +221,18 @@ export class Composer extends Component<ComposerProps, SpreadsheetChildEnv> {
         this.env.focusableElement.setFocusableElement(el);
       }
       this.contentHelper.updateEl(el);
-      this.processTokenAtCursor();
     });
 
     useEffect(() => {
       this.processContent();
     });
 
-    onPatched(() => {
-      // Required because typing '=SUM' and double-clicking another cell leaves ShowProvider/ShowDescription true
-      if (this.env.model.getters.getEditionMode() === "inactive") {
+    useEffect(
+      () => {
         this.processTokenAtCursor();
-      }
-    });
+      },
+      () => [this.env.model.getters.getEditionMode() !== "inactive"]
+    );
   }
 
   // ---------------------------------------------------------------------------
@@ -722,6 +721,7 @@ export class Composer extends Component<ComposerProps, SpreadsheetChildEnv> {
       this.env.model.getters.getAutoCompleteDataValidationValues();
     if (!content.startsWith("=") && dataValidationAutocompleteValues.length) {
       this.showDataValidationAutocomplete(dataValidationAutocompleteValues);
+      return;
     }
 
     if (content.startsWith("=")) {

tests/data_validation/data_validation_list_component.test.ts

@@ -203,10 +203,13 @@ describe("autocomplete in composer", () => {
 
     test("Values displayed are not filtered when the user opens the composer with a valid value", async () => {
       setCellContent(model, "A1", "hello");
-      model.dispatch("START_EDITION", {});
-      ({ fixture, parent } = await mountComposerWrapper(model, { focus: "cellFocus" }));
+      ({ fixture, parent } = await mountComposerWrapper(model, { focus: "inactive" }));
+      parent.startComposition();
+      // start edition
       await nextTick();
-      expect(fixture.querySelectorAll<HTMLElement>(".o-autocomplete-value")).toHaveLength(3);
+      // autocomplete update
+      await nextTick();
+      expect(document.querySelectorAll<HTMLElement>(".o-autocomplete-value")).toHaveLength(3);
     });
 
     test("Values displayed are not filtered when the input has no match in valid values", async () => {
@@ -305,12 +308,18 @@ describe("Selection arrow icon in grid", () => {
     );
   });
 
-  test("Clicking on the icon opens the composer", async () => {
+  test("Clicking on the icon opens the composer with suggestions", async () => {
     setSelection(model, ["B2"]);
     ({ fixture } = await mountSpreadsheet({ model }));
     await click(fixture, ".o-dv-list-icon");
+    await nextTick();
     expect(model.getters.getEditionMode()).toBe("editing");
     expect(model.getters.getCurrentEditedCell()).toEqual({ sheetId, col: 0, row: 0 });
+    const suggestions = fixture.querySelectorAll(".o-autocomplete-dropdown .o-autocomplete-value");
+    expect(suggestions.length).toBe(3);
+    expect(suggestions[0].textContent).toBe("ok");
+    expect(suggestions[1].textContent).toBe("hello");
+    expect(suggestions[2].textContent).toBe("okay");
   });
 
   test("Icon is not displayed when display style is plainText", async () => {

tests/test_helpers/helpers.ts

@@ -741,12 +741,12 @@ export class ComposerWrapper extends Component<ComposerWrapperProps, Spreadsheet
 
   get composerProps(): ComposerProps {
     return {
+      ...this.props.composerProps,
       onComposerContentFocused: () => {
         this.state.focusComposer = "contentFocus";
         this.setEdition({});
       },
       focus: this.state.focusComposer,
-      ...this.props.composerProps,
     };
   }