@supersoniks/concorde 4.9.98-visual-stack.0 → 5.0.0

package/src/core/components/ui/form/input-autocomplete/input-autocomplete.ts

@@ -9,7 +9,6 @@ import {
 import {
   FormInput,
   FormElement,
-  Subscriber,
   TemplatesContainer,
 } from "@supersoniks/concorde/mixins";
 import "@supersoniks/concorde/core/components/ui/form/input/input";
@@ -25,17 +24,20 @@ import { customScroll } from "@supersoniks/concorde/core/components/ui/_css/scro
 import { ResizeController } from "@lit-labs/observers/resize-controller.js";
 import { traverseDotNotation } from "@supersoniks/concorde/core/utils/Objects";
 import { Pop } from "../../pop/pop";
+import type { ListItems } from "@supersoniks/concorde/core/components/functional/list/list";
 
 type ListItem = Record<string, string>;
 
+const SUGGESTION_VALUE_ATTR = "data-autocomplete-value";
+const SUGGESTION_LABEL_ATTR = "data-autocomplete-label";
+
 /**
- * Input avec autocomplete. Propose des valeurs à partir d'un sonic-queue.
- * L'input permet de filtrer les choix de valeurs dans le sonic-pop.
- * La valeur de cet input est ensuite retransmit au premier via un dataProvider.
+ * Input avec suggestions (queue). Valeur formulaire via formDataProvider + name ;
+ * texte de recherche sur un store interne dédié.
  */
 @customElement("sonic-input-autocomplete")
 export class InputAutocomplete extends TemplatesContainer(
-  FormInput(FormElement(Subscriber(LitElement)))
+  FormInput(FormElement(LitElement))
 ) {
   static styles = [
     customScroll,
@@ -43,7 +45,6 @@ export class InputAutocomplete extends TemplatesContainer(
       :host {
         display: block;
       }
-      /**disable mouse if there is an attribute readonly  */
       :host([readonly]),
       :host([disabled]) {
         pointer-events: none;
@@ -60,26 +61,34 @@ export class InputAutocomplete extends TemplatesContainer(
         min-width: 14rem;
         width: 100%;
       }
+
+      .init-queue {
+        display: none !important;
+        position: absolute;
+        width: 0;
+        height: 0;
+        overflow: hidden;
+        pointer-events: none;
+      }
     `,
   ];
 
-  /**
-   * Possibles mutualisation avec text
-   */
   @property({ type: String }) size: Size = "md";
   @property({ type: String }) placeholder = "";
   @property() filteredFields = "";
   @property({ type: Boolean, reflect: true }) readonly: boolean | null = null;
 
   @property({ type: String }) dataProviderExpression = "";
-  @property({ type: Number }) minSearchLength = 0;
+  @property({ type: String }) serviceURL = "";
+  @property({ type: Number }) minSearchLength = 3;
   @property({ type: Boolean }) select?: boolean;
   @property({ type: String }) key = "";
-  /** The parameter name to use in dataProviderExpression route */
   @property({ type: String }) searchParameter = "";
-  /** The property name to search in the dataProviderExpression result, use "_self" if result is a string list */
   @property({ type: String }) propertyName = "";
 
+  @property({ type: Function, attribute: false }) items: ListItems | null =
+    null;
+
   @queryAssignedNodes({ slot: "prefix", flatten: true })
   slotInputPrefixNodes!: Array<Node>;
 
@@ -87,58 +96,292 @@ export class InputAutocomplete extends TemplatesContainer(
   @query("sonic-pop") popElement!: Pop;
   _resizeController = new ResizeController(this, {});
 
-  @state() isPopVisible = false;
-
-  /**
-   * Les dataProviders
-   */
-  private searchDataProvider = "";
+  @state() private searchText = "";
+  @state() private searchDataProvider = "";
+  /** Filtre queue : ne reçoit la saisie qu'à partir de minSearchLength. */
+  private queueFilterDataProvider = "";
   private initSearchDataProvider = "";
   private queueDataProvider = "";
   private initQueueDataProvider = "";
-  @state()
-  private lastValidSearch: ListItem | string = "";
-  private searchPublisher?: DataProvider;
-  private countPublisher?:  DataProvider;
+
+  /** Public — cptypeahead. */
+  lastValidSearch: ListItem | string = "";
+  /** Public — cptypeahead (saisie live). */
+  searchPublisher?: DataProvider;
+
+  private queueFilterPublisher?: DataProvider;
   private initCountPublisher?: DataProvider;
   private formValuePublisher?: DataProvider;
+  private providersReady = false;
+  /** Évite de rouvrir le pop juste après une sélection. */
+  private suppressPopOpen = false;
+  private filterArmed = false;
+
+  private static instanceCounter = 0;
 
-  /**
-   * Les fonctions de gestion
-   */
   hasSlotOrProps() {
     this.hasInputPrefix = !!this.slotInputPrefixNodes?.length;
   }
 
-  /**
-   * Run when the formDataProvider's field is updated
-   *
-   * @param value
-   */
+  private searchFieldName() {
+    return this.searchParameter || this.name;
+  }
+
+  private isSearchParameter() {
+    return !this.searchParameter || this.searchParameter === this.name;
+  }
+
+  private shouldShowSuggestions(text: string) {
+    return (
+      (text?.length || 0) >= this.minSearchLength || this.minSearchLength === 0
+    );
+  }
+
+  private isSearchFocused() {
+    const active = document.activeElement;
+    if (!active) return false;
+    const input = this.renderRoot?.querySelector(
+      "sonic-input.form-element"
+    ) as HTMLElement | null;
+    return !!(
+      input &&
+      (active === input ||
+        input.contains(active) ||
+        input.shadowRoot?.contains(active))
+    );
+  }
+
+  private openPopIfNeeded(text: string, fromUserInput = false) {
+    if (this.suppressPopOpen) return;
+    if (!this.shouldShowSuggestions(text)) {
+      this.popElement?.hide();
+      return;
+    }
+    if (fromUserInput || this.isSearchFocused() || this.popElement?.open) {
+      this.popElement?.show();
+      // 2e show après le render Lit du pop (remettait display:none)
+      requestAnimationFrame(() => {
+        if (this.suppressPopOpen) return;
+        const current = String(
+          this.searchPublisher?.get() ?? this.searchText ?? ""
+        );
+        if (this.shouldShowSuggestions(current)) {
+          this.popElement?.show();
+        }
+      });
+    }
+  }
+
+  private setSearchText(value: string | ListItem | null | undefined) {
+    const next =
+      value == null || value === ""
+        ? ""
+        : typeof value === "string"
+          ? value
+          : String(value);
+    this.searchText = next;
+    if (this.searchPublisher && this.searchPublisher.get() !== next) {
+      this.searchPublisher.set(next);
+    }
+    this.syncQueueFilter(next);
+  }
+
+  /** Pousse vers la queue seulement si assez de caractères. */
+  private syncQueueFilter(text: string) {
+    if (!this.queueFilterPublisher) return;
+    const ready =
+      this.minSearchLength === 0 || text.length >= this.minSearchLength;
+    if (ready) {
+      if (!this.filterArmed || this.queueFilterPublisher.get() !== text) {
+        this.queueFilterPublisher.set(text);
+      }
+      this.filterArmed = true;
+      return;
+    }
+    if (this.filterArmed) {
+      this.filterArmed = false;
+      this.clearSearchQueueResults();
+    }
+  }
+
+  private clearSearchQueueResults() {
+    if (!this.queueDataProvider) return;
+    const queuePub = PublisherManager.get(this.queueDataProvider);
+    const descriptors = queuePub.get();
+    if (Array.isArray(descriptors)) {
+      for (const d of descriptors) {
+        if (d?.dataProvider) {
+          PublisherManager.getInstance().delete(d.dataProvider);
+        }
+      }
+    }
+    queuePub.set([]);
+  }
+
+  private applySuggestion(value: unknown, label: string) {
+    this.suppressPopOpen = true;
+    const formValue = value as string;
+    const searchLabel =
+      label ||
+      (typeof formValue === "string" ? formValue : String(formValue ?? ""));
+
+    this.formValuePublisher?.set(formValue);
+    this.lastValidSearch = this.isSearchParameter() ? formValue : searchLabel;
+    this.setSearchText(
+      this.isSearchParameter() ? String(formValue ?? "") : searchLabel
+    );
+    this.popElement?.hide();
+
+    // Laisse le cycle hide/focus se terminer avant de réautoriser l'ouverture.
+    requestAnimationFrame(() => {
+      this.suppressPopOpen = false;
+    });
+  }
+
   private updateSearchParameter = (value: string) => {
-    if (value == "" && this.isSearchParameter()) {
-      this.lastValidSearch = "";
+    if (value == "" || value == null) {
+      if (this.isSearchParameter()) {
+        this.lastValidSearch = "";
+        this.setSearchText("");
+      }
       return;
     }
     const found = this.queryQueueListItem(
       this.queueDataProvider,
-      this.findSelection,
+      (listItem) => {
+        const itemVal =
+          this.propertyName === "_self"
+            ? listItem
+            : listItem[this.propertyName || this.name];
+        return itemVal == value;
+      },
       this.setSearchFromSelection
     );
-    // Si la liste de this.queueDataProvider est bien initialisée, mais qu'aucun item ne correspond à la recherche
-    // On affiche quand même la valeur dans le champ de recherche, car il provient directement du formDataProvider
-    if (found === false && this.isSearchParameter()) {
-      this.lastValidSearch = value;
-      this.searchPublisher?.set(this.lastValidSearch);
+    if (!found) {
+      const foundInit = this.queryQueueListItem(
+        this.initQueueDataProvider,
+        (listItem) => {
+          const itemVal =
+            this.propertyName === "_self"
+              ? listItem
+              : listItem[this.propertyName || this.name];
+          return itemVal == value;
+        },
+        this.setSearchFromSelection
+      );
+      if (!foundInit && this.isSearchParameter()) {
+        this.lastValidSearch = value;
+        this.setSearchText(String(value));
+      }
     }
   };
 
-  private isSearchParameter() {
-    return !this.searchParameter || this.searchParameter === this.name;
+  private onSearchPublisherAssign = (value: string) => {
+    const next = value == null ? "" : String(value);
+    if (this.searchText !== next) {
+      this.searchText = next;
+    }
+    this.syncQueueFilter(next);
+    this.openPopIfNeeded(next);
+  };
+
+  private handleSearchActivity = () => {
+    const text = String(this.searchPublisher?.get() ?? this.searchText ?? "");
+    this.openPopIfNeeded(text, true);
+  };
+
+  /** keyup composé depuis l'input shadow — ouvre le pop dès qu'il y a assez de caractères. */
+  private handleSearchKeyUp = (e: KeyboardEvent) => {
+    if (e.ctrlKey || e.metaKey || e.altKey) return;
+    if (["Escape", "Tab", "Enter", "ArrowUp", "ArrowDown"].includes(e.key))
+      return;
+    this.handleSearchActivity();
+  };
+
+  /**
+   * Capture : empêche la nav FormElement (data-keyboard-nav) de sortir du champ
+   * et de fermer le pop. ArrowDown/Up gardent le pop ouvert et entrent dans la liste.
+   * Enter depuis le champ sélectionne la 1re suggestion.
+   */
+  private handleSearchKeyDown = (e: KeyboardEvent) => {
+    const path = e.composedPath() as HTMLElement[];
+    const fromMenuItem = path.some((n) => n?.tagName === "SONIC-MENU-ITEM");
+
+    // Enter / Espace sur une suggestion → sélection
+    if (fromMenuItem && (e.key === "Enter" || e.key === " ")) {
+      const item = path.find((n) => n?.tagName === "SONIC-MENU-ITEM") as
+        | (HTMLElement & { value?: string | null })
+        | undefined;
+      if (!item) return;
+      e.preventDefault();
+      e.stopPropagation();
+      this.selectSuggestionItem(item);
+      return;
+    }
+
+    if (fromMenuItem) return;
+
+    const text = String(this.searchPublisher?.get() ?? this.searchText ?? "");
+    if (!this.shouldShowSuggestions(text)) return;
+
+    // Enter dans le champ → 1re suggestion
+    if (e.key === "Enter") {
+      const items = this.getSuggestionItems();
+      if (!items.length) return;
+      e.preventDefault();
+      e.stopPropagation();
+      this.selectSuggestionItem(items[0]);
+      return;
+    }
+
+    if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    this.suppressPopOpen = false;
+    this.popElement?.show();
+    requestAnimationFrame(() => this.popElement?.show());
+
+    const items = this.getSuggestionItems();
+    if (!items.length) return;
+
+    const target = e.key === "ArrowDown" ? items[0] : items[items.length - 1];
+    target.focus?.();
+  };
+
+  private getSuggestionItems() {
+    return [
+      ...(this.renderRoot?.querySelectorAll("sonic-menu-item") ?? []),
+    ] as Array<HTMLElement & { value?: string | null; focus?: () => void }>;
+  }
+
+  private selectSuggestionItem(
+    item: HTMLElement & { value?: string | null }
+  ) {
+    const value =
+      item.getAttribute(SUGGESTION_VALUE_ATTR) ?? item.value ?? null;
+    const label =
+      item.getAttribute(SUGGESTION_LABEL_ATTR) ??
+      (item.textContent || "").trim();
+
+    if (value == null && !label) return;
+    this.applySuggestion(value ?? label, label);
   }
 
-  private updatePopContentVisibility = (value: string) => {
-    this.isPopVisible = (value?.length || 0) >= this.minSearchLength;
+  /**
+   * pointerdown : avant le click document qui ferme le pop.
+   * data-autocomplete-* (démos .items) ou value + textContent (templates legacy).
+   */
+  private handleSuggestionPointerDown = (e: Event) => {
+    const item = (e.composedPath() as HTMLElement[]).find(
+      (n) => n?.tagName === "SONIC-MENU-ITEM"
+    ) as (HTMLElement & { value?: string | null }) | undefined;
+    if (!item) return;
+
+    e.preventDefault();
+    e.stopPropagation();
+    this.selectSuggestionItem(item);
   };
 
   private initSearchParameter = () => {
@@ -149,22 +392,6 @@ export class InputAutocomplete extends TemplatesContainer(
     );
   };
 
-  private selectListItem = (listItem: ListItem) => {
-    const value =
-      this.propertyName === "_self"
-        ? listItem
-        : listItem[this.propertyName || this.name];
-    this.formValuePublisher?.set(value);
-  };
-
-  private findSearchedItem = (listItem: ListItem) => {
-    const value =
-      this.propertyName === "_self"
-        ? listItem
-        : listItem[this.propertyName || this.searchParameter || this.name];
-    return value == this.searchPublisher?.get();
-  };
-
   private findSelection = (listItem: ListItem) => {
     const value =
       this.propertyName === "_self"
@@ -178,115 +405,97 @@ export class InputAutocomplete extends TemplatesContainer(
       this.propertyName === "_self"
         ? listItem
         : listItem[this.searchParameter || this.propertyName || this.name];
-    if (this.isSearchParameter()) {
-      this.searchPublisher?.set(this.lastValidSearch);
-    }
-  };
-  private updateActiveSelection = () => {
-    this.queryQueueListItem(
-      this.queueDataProvider,
-      this.findSearchedItem,
-      this.selectListItem
-    );
-    if (
-      !this.select &&
-      this.lastValidSearch &&
-      this.lastValidSearch != this.searchPublisher?.get() &&
-      this.formValuePublisher?.get()
-    ) {
-      this.formValuePublisher?.set("");
-    }
+    this.setSearchText(this.lastValidSearch as string);
   };
 
-  connectedCallback() {
-    super.connectedCallback();
-
-    /**
-     * Nom de la valeur de recherche
-     * Si non défini, on utilise name
-     **/
-    const searchParameter = this.searchParameter || this.name;
-
-    /**
-     * Nommage des différents dataProviders utilisés
-     */
-    const formDataProvider = this.getAncestorAttributeValue("formDataProvider");
-    // Create unique provider name with formProvider name + input name
-    const dpPrefix = formDataProvider + "__" + this.name + "__autocomplete";
+  private setupProviders() {
+    const searchParameter = this.searchFieldName();
+    const formDataProvider =
+      this.formDataProvider ||
+      this.getAncestorAttributeValue("formDataProvider") ||
+      "";
+
+    const instanceId = InputAutocomplete.instanceCounter++;
+    const dpPrefix =
+      (formDataProvider || "form") +
+      "__" +
+      (this.name || "field") +
+      "__autocomplete__" +
+      instanceId;
     this.initSearchDataProvider = `${dpPrefix}_init_search__`;
     this.initQueueDataProvider = `${dpPrefix}_init_queue__`;
     this.searchDataProvider = `${dpPrefix}_search__`;
+    this.queueFilterDataProvider = `${dpPrefix}_queue_filter__`;
     this.queueDataProvider = `${dpPrefix}_queue__`;
 
-    /**
-     * Les publishers utilisés plusieurs fois dans la classe son miss en propriétés privées de la classe
-     */
     const getPublisher = PublisherManager.get;
-    this.searchPublisher = getPublisher(this.searchDataProvider)[
-      searchParameter
-    ];
+    this.searchPublisher =
+      getPublisher(this.searchDataProvider)[searchParameter];
+    this.queueFilterPublisher =
+      getPublisher(this.queueFilterDataProvider)[searchParameter];
     this.formValuePublisher = traverseDotNotation(
       getPublisher(formDataProvider),
       this.name
     );
-    this.countPublisher = getPublisher(this.queueDataProvider).resultCount;
     this.initCountPublisher = getPublisher(
       this.initQueueDataProvider
     ).resultCount;
 
-    /**
-     * Si une valeur est fourrnie a l'initialisation, un queue spécifique appelle le service avec le name founi en paramètre
-     * Pour récupérer la valeur de searchParameter correspondante et renseigner l'input
-     **/
     if (this.value) {
-      PublisherManager.get(this.initSearchDataProvider)[this.name].set(this.value);
+      getPublisher(this.initSearchDataProvider)[this.name].set(this.value);
     }
-    this.initCountPublisher?.onAssign(this.initSearchParameter);
 
-    /**
-     * Lorsque la sélection change, on met à jour la valeur de recherche
-     */
+    this.initCountPublisher?.onAssign(this.initSearchParameter);
     this.formValuePublisher?.onAssign(this.updateSearchParameter);
+    this.searchPublisher?.onAssign(this.onSearchPublisherAssign);
 
-    /**
-     * Lorsque La valeur de recherche change, que le composant n'est pas en mode select
-     * et qu'elle est différente de la derniere recherche valide on désactive la selection
-     */
-    this.countPublisher?.onAssign(this.updateActiveSelection);
+    const existing = this.searchPublisher?.get();
+    if (existing != null && existing !== "") {
+      this.searchText = String(existing);
+      this.syncQueueFilter(this.searchText);
+    }
 
-    this.searchPublisher?.onAssign(this.updatePopContentVisibility);
+    this.providersReady = true;
+  }
+
+  private teardownProviders() {
+    this.initCountPublisher?.offAssign(this.initSearchParameter);
+    this.formValuePublisher?.offAssign(this.updateSearchParameter);
+    this.searchPublisher?.offAssign(this.onSearchPublisherAssign);
+
+    const getPublisher = PublisherManager.get;
+    if (this.initSearchDataProvider)
+      getPublisher(this.initSearchDataProvider).delete();
+    if (this.initQueueDataProvider)
+      getPublisher(this.initQueueDataProvider).delete();
+    if (this.searchDataProvider) getPublisher(this.searchDataProvider).delete();
+    if (this.queueFilterDataProvider)
+      getPublisher(this.queueFilterDataProvider).delete();
+    if (this.queueDataProvider) getPublisher(this.queueDataProvider).delete();
+
+    this.providersReady = false;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setupProviders();
+    this.addEventListener("keyup", this.handleSearchKeyUp);
+    this.addEventListener("keydown", this.handleSearchKeyDown, true);
   }
 
   protected firstUpdated(_changedProperties: PropertyValues): void {
     super.firstUpdated(_changedProperties);
-    // Écouter le focusout sur le popElement pour fermer le pop quand le focus sort
     this.popElement.addEventListener("focusout", this.handleFocusOut);
   }
 
   disconnectedCallback() {
+    this.removeEventListener("keyup", this.handleSearchKeyUp);
+    this.removeEventListener("keydown", this.handleSearchKeyDown, true);
+    this.teardownProviders();
+    this.popElement?.removeEventListener("focusout", this.handleFocusOut);
     super.disconnectedCallback();
-    this.initCountPublisher?.offAssign(this.initSearchParameter);
-    this.formValuePublisher?.offAssign(this.updateSearchParameter);
-    this.countPublisher?.offAssign(this.updateActiveSelection);
-    const getPublisher = PublisherManager.get;
-    getPublisher(this.initSearchDataProvider).delete();
-    getPublisher(this.initQueueDataProvider).delete();
-    getPublisher(this.searchDataProvider).delete();
-    getPublisher(this.queueDataProvider).delete();
-
-    this.searchPublisher?.offAssign(this.updatePopContentVisibility);
-
-    // Retirer l'écouteur de focusout
-    this.popElement.removeEventListener("focusout", this.handleFocusOut);
   }
 
-  /**
-   * @param queueDataProvider
-   * @param itemFinder
-   * @param itemMutator
-   *
-   * @return bool|undefined True if item found, false otherwise, undefined if result is not a list
-   */
   queryQueueListItem(
     queueDataProvider: string,
     itemFinder: (listItem: ListItem) => boolean,
@@ -294,19 +503,17 @@ export class InputAutocomplete extends TemplatesContainer(
   ) {
     const queuePublisher = PublisherManager.get(queueDataProvider);
     let listItem: ListItem | undefined;
-    let listsDescriptors = queuePublisher.get();
+    const listsDescriptors = queuePublisher.get();
 
     if (!listsDescriptors || !Array.isArray(listsDescriptors)) {
       return false;
     }
     if (!listsDescriptors.length) return false;
     for (const listDescriptor of listsDescriptors) {
-      let list = PublisherManager.get(listDescriptor.dataProvider).get();
+      const list = PublisherManager.get(listDescriptor.dataProvider).get();
       if (!Array.isArray(list)) continue;
       listItem = list.find(itemFinder);
-      if (listItem) {
-        break;
-      }
+      if (listItem) break;
     }
     if (listItem) {
       itemMutator(listItem);
@@ -316,68 +523,86 @@ export class InputAutocomplete extends TemplatesContainer(
   }
 
   setSelectionRange(start: number, end: number) {
-    (this.querySelector("sonic-input") as Input)?.setSelectionRange(start, end);
+    (
+      this.renderRoot?.querySelector("sonic-input.form-element") as Input | null
+    )?.setSelectionRange(start, end);
   }
 
   handleHide(): void {
     if (!this.select) return;
-    if (this.searchPublisher?.get() == "") {
+    if (!this.searchText) {
       this.lastValidSearch = "";
       this.formValuePublisher?.set("");
       return;
     }
-    this.searchPublisher?.set(this.lastValidSearch);
+    this.setSearchText(this.lastValidSearch as string);
   }
 
-  getInputValue() {
-    if (!this.isSearchParameter()) {
-      return this.lastValidSearch;
+  /** Contient `node` même à travers des shadow roots imbriqués. */
+  private deepContains(container: Element | null | undefined, node: Node | null) {
+    if (!container || !node) return false;
+    let current: Node | null = node;
+    while (current) {
+      if (current === container || container.contains(current)) return true;
+      const root = current.getRootNode();
+      if (root instanceof ShadowRoot) {
+        current = root.host;
+      } else {
+        break;
+      }
     }
-    return this.searchPublisher?.get();
+    return false;
   }
 
   handleFocus(): void {
-    this.popElement.show();
+    const text = String(this.searchText ?? "");
+    if (this.shouldShowSuggestions(text)) {
+      this.suppressPopOpen = false;
+      this.popElement?.show();
+    }
   }
 
-  handleFocusOut = (_e: FocusEvent): void => {
-    // Utiliser setTimeout pour vérifier où va le focus après le focusout
-    // Cela permet de ne pas fermer le pop si le focus va vers un élément du pop
+  handleFocusOut = (e: FocusEvent): void => {
+    const related = e.relatedTarget as Node | null;
+    if (
+      this.deepContains(this.popElement, related) ||
+      this.deepContains(this, related)
+    ) {
+      return;
+    }
+
     setTimeout(() => {
+      if (this.suppressPopOpen) return;
       const activeElement = document.activeElement;
-      if (!activeElement) {
-        this.popElement.hide();
+      if (
+        !activeElement ||
+        this.deepContains(this.popElement, activeElement) ||
+        this.deepContains(this, activeElement)
+      ) {
         return;
       }
-
-      // Vérifier si le focus est dans le popElement ou dans ce composant
-      const isInPop =
-        this.popElement.contains(activeElement) ||
-        this.popElement.shadowRoot?.contains(activeElement);
-      const isInComponent =
-        this.contains(activeElement) ||
-        this.shadowRoot?.contains(activeElement);
-
-      // Si le focus n'est ni dans le pop ni dans ce composant, fermer le pop
-      if (!isInPop && !isInComponent) {
-        this.popElement.hide();
-      }
+      this.popElement?.hide();
     }, 0);
   };
 
   render() {
+    if (!this.providersReady || !this.searchDataProvider) {
+      return nothing;
+    }
+
+    const templates = this.templateList.concat(this.templatePartsList);
+
     return html`
       <sonic-pop manual style="display:block;" @hide=${this.handleHide}>
         <sonic-input
           class="form-element"
-          dataProvider="${this.initSearchDataProvider + Math.random()}"
-          noAutofill
-          formDataProvider="${this.searchDataProvider}"
+          .formDataProvider=${this.searchDataProvider}
+          .value=${this.searchText}
           type="search"
-          data-keyboard-nav="${this.getAttribute("data-keyboard-nav") || ""}"
+          data-keyboard-nav=""
           label="${ifDefined(this.label)}"
           description="${ifDefined(this.description)}"
-          name="${ifDefined(this.searchParameter || this.name)}"
+          name="${ifDefined(this.searchFieldName())}"
           ?required=${this.required}
           placeholder="${ifDefined(this.placeholder)}"
           ?readonly="${this.readonly}"
@@ -386,7 +611,7 @@ export class InputAutocomplete extends TemplatesContainer(
           inlineContent
           size=${this.size}
           @focus=${this.handleFocus}
-          value=${ifDefined(this.getInputValue())}
+          @change=${this.handleSearchActivity}
         >
           <slot
             name="prefix"
@@ -408,33 +633,40 @@ export class InputAutocomplete extends TemplatesContainer(
         <sonic-menu
           slot="content"
           class="custom-scroll"
-          style="${this.offsetWidth
-            ? `width: ${this.offsetWidth}px`
-            : ""}; display:${this.isPopVisible ? "block" : "none"};"
+          data-on-select="keep"
+          style="${this.offsetWidth ? `width: ${this.offsetWidth}px` : ""}"
+          @pointerdown=${this.handleSuggestionPointerDown}
         >
           <sonic-queue
             dataProvider="${this.queueDataProvider}"
             filteredFields=${this.filteredFields}
             dataProviderExpression="${this.dataProviderExpression}"
-            dataFilterProvider="${this.searchDataProvider}"
-            key="${this.key}"
-            .templates=${this.templateList.concat(this.templatePartsList)}
-            displayContents
-          >
-          </sonic-queue>
-          <sonic-queue
-            noLazyload
-            loader="no-loader"
-            dataProvider="${this.initQueueDataProvider}"
-            filteredFields=${this.filteredFields}
-            dataProviderExpression="${this.dataProviderExpression}"
-            dataFilterProvider="${this.initSearchDataProvider}"
+            dataFilterProvider="${this.queueFilterDataProvider}"
+            serviceURL=${ifDefined(this.serviceURL || undefined)}
             key="${this.key}"
+            .templates=${templates}
+            .items=${this.items}
             displayContents
           >
           </sonic-queue>
         </sonic-menu>
       </sonic-pop>
+      <!-- Lookup valeur initiale : hors menu, jamais displayContents (sinon visible). -->
+      <sonic-queue
+        class="init-queue"
+        hidden
+        noLazyload
+        loader="no-loader"
+        dataProvider="${this.initQueueDataProvider}"
+        filteredFields=${this.filteredFields}
+        dataProviderExpression="${this.dataProviderExpression}"
+        dataFilterProvider="${this.initSearchDataProvider}"
+        serviceURL=${ifDefined(this.serviceURL || undefined)}
+        key="${this.key}"
+        .templates=${templates}
+        .items=${this.items}
+      >
+      </sonic-queue>
     `;
   }
 }