fix: move focusout handling into ComboboxController

Author: ArathyKumar

core/pfe-core/controllers/combobox-controller.ts

@@ -188,6 +188,10 @@ export class ComboboxController<
 
   private static langsRE = new RegExp(ComboboxController.langs.join('|'));
 
+  private static instances = new WeakMap<ReactiveControllerHost, ComboboxController<HTMLElement>>();
+
+  private static hosts = new Set<ReactiveControllerHost>();
+
   static {
     // apply visually-hidden styles
     this.#alertTemplate.innerHTML = `
@@ -205,6 +209,19 @@ export class ComboboxController<
       `;
   }
 
+  // Hide listbox on focusout
+  static {
+    document.addEventListener('focusout', event => {
+      const target = event.target as HTMLElement;
+      for (const host of ComboboxController.hosts) {
+        if (host instanceof Node && host.contains(target)) {
+          const instance = ComboboxController.instances.get(host);
+          instance?._onFocusoutElement();
+        }
+      }
+    });
+  }
+
   private options: RequireProps<ComboboxControllerOptions<Item>,
     | 'isItemDisabled'
     | 'isItem'
@@ -333,6 +350,8 @@ export class ComboboxController<
       isItemDisabled: this.options.isItemDisabled,
       setItemSelected: this.options.setItemSelected,
     });
+    ComboboxController.instances.set(host, this);
+    ComboboxController.hosts.add(host);
   }
 
   async hostConnected(): Promise<void> {
@@ -359,6 +378,24 @@ export class ComboboxController<
     this.#fc?.hostDisconnected();
   }
 
+  disconnect(): void {
+    ComboboxController.instances.delete(this.host);
+    ComboboxController.hosts.delete(this.host);
+  }
+
+  async _onFocusoutElement(): Promise<void> {
+    if (this.#hasTextInput && this.options.isExpanded()) {
+      const root = this.#element?.getRootNode();
+      await new Promise(requestAnimationFrame);
+      if (root instanceof ShadowRoot || root instanceof Document) {
+        const { activeElement } = root;
+        if (!this.#element?.contains(activeElement)) {
+          this.#hide();
+        }
+      }
+    }
+  }
+
   /**
    * Order of operations is important
    */

elements/pf-search-input/pf-search-input.ts

@@ -51,23 +51,6 @@ export class PfSearchInput extends LitElement {
     delegatesFocus: true,
   };
 
-  static instances: Set<PfSearchInput> = new Set<PfSearchInput>();
-
-  static {
-    if (!isServer) {
-      document.addEventListener('click', event => {
-        for (const instance of PfSearchInput.instances) {
-          instance._onOutsideClick(event);
-        }
-      });
-      document.addEventListener('focusout', () => {
-        for (const instance of PfSearchInput.instances) {
-          instance._onFocusOut();
-        }
-      });
-    }
-  }
-
   /** Accessible label for the search input */
   @property({ attribute: 'accessible-label' }) accessibleLabel?: string;
 
@@ -77,11 +60,6 @@ export class PfSearchInput extends LitElement {
   /** Whether the search input's listbox is expanded */
   @property({ type: Boolean, reflect: true }) expanded = false;
 
-  /**
-   * Enable to flip listbox when it reaches boundary
-   */
-  @property({ attribute: 'enable-flip', type: Boolean }) enableFlip = false;
-
   /** Current form value */
   @property() value?: string;
 
@@ -133,29 +111,10 @@ export class PfSearchInput extends LitElement {
 
   connectedCallback(): void {
     super.connectedCallback();
-    PfSearchInput.instances.add(this);
   }
 
   disconnectedCallback(): void {
     super.disconnectedCallback();
-    PfSearchInput.instances.delete(this);
-  }
-
-  // Function to handle the closing of popover on outside click
-  @bound private _onOutsideClick(event: MouseEvent) {
-    const path = event.composedPath();
-    if (!path.includes(this._searchInputContainer)) {
-      if (this.expanded) {
-        this.expanded = false;
-      }
-    }
-  }
-
-  // Function to handle the closing of popover on focus out
-  @bound private _onFocusOut() {
-    if (this.expanded) {
-      this.expanded = false;
-    }
   }
 
   /** List of options */
@@ -243,7 +202,7 @@ export class PfSearchInput extends LitElement {
 
   async #doExpand() {
     try {
-      await this.#float.show({ placement: this.position || 'bottom', flip: !!this.enableFlip });
+      await this.#float.show({ placement: this.position || 'bottom', flip: true });
       return true;
     } catch {
       return false;