@emuanalytics/flow-rdf-ui 4.1.27 → 4.1.28

package/dist/components/autocomplete/autocomplete.component.mjs

@@ -15,6 +15,7 @@ import styles from './autocomplete.styles.mjs';
 import { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry.mjs';
 import { stopAnimations, animateTo } from '../../internal/animate.mjs';
 import { waitForEvent } from '../../internal/event.mjs';
+import { scrollIntoView } from '../../internal/scroll.mjs';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -27,6 +28,7 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
+let nextAutocompleteId = 0;
 class FlowUiAutocomplete extends FlowRdfFormControl {
   constructor() {
     super(...arguments);
@@ -37,6 +39,19 @@ class FlowUiAutocomplete extends FlowRdfFormControl {
     this.pendingChangeEvent = false;
     this.pendingInputEvent = false;
     this.hasOptions = false;
+    /** @internal True while the user is typing to filter (input text has diverged from the committed value). */
+    this.inputChanged = false;
+    /** @internal Stable base used to generate option DOM ids when the host has no `id` of its own. */
+    this.optionIdBase = "";
+    /** @internal Monotonic per-host suffix for option DOM ids, so ids never collide across re-renders. */
+    this.nextOptionId = 0;
+    /**
+     * @internal True while hide()'s close animation is in flight. `open` stays true across that
+     * animation (so the popup remains visible while it fades out), which would otherwise make a
+     * concurrent show() no-op at its `!this.open` guard. show() flips this to false to cancel the
+     * close and reopen; hide() bails after its animation if it finds the close was cancelled.
+     */
+    this.closing = false;
     this.formControlController = new FormControlController(this, {
       assumeInteractionOn: ["flow-ui-blur", "flow-ui-input"]
     });
@@ -82,6 +97,11 @@ class FlowUiAutocomplete extends FlowRdfFormControl {
     this.hoist = boolean(this.hoist, true);
     this.clearOnFocus = boolean(this.clearOnFocus, true);
   }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.hasFocus = false;
+    this.removeListenersForDropdown();
+  }
   /** Gets the associated form, if one exists. */
   getForm() {
     return this.formControlController.getForm();
@@ -116,8 +136,31 @@ class FlowUiAutocomplete extends FlowRdfFormControl {
   }
   /**
    * @internal
-   * Un-highlights currently highlighted option
-   * and highlights the given option
+   * Gives each slotted option a stable DOM `id` (`<host-id>-option-<n>`) used purely for
+   * ARIA wiring (`aria-activedescendant`). A consumer-provided `id` is preserved. This `id` is
+   * independent of the option's `value` (domain identity). See ADR-0001.
+   *
+   * The suffix comes from a monotonic per-host counter rather than the option's index: a filter
+   * re-render can retain some option elements while creating others, so an index-based suffix
+   * could hand a new element an id that a retained element already owns.
+   */
+  assignOptionIds(options) {
+    if (!this.optionIdBase) {
+      this.optionIdBase = this.id || `flow-ui-autocomplete-${++nextAutocompleteId}`;
+    }
+    options.forEach((option) => {
+      if (!option.id) {
+        option.id = `${this.optionIdBase}-option-${this.nextOptionId++}`;
+      }
+    });
+  }
+  /**
+   * @internal
+   * Un-highlights currently highlighted option and highlights the given option.
+   *
+   * DOM focus stays on the `<input>` (per the APG editable-combobox pattern); the highlighted
+   * ("current") option is conveyed to assistive tech via the input's `aria-activedescendant`,
+   * not by moving focus. See ADR-0001.
    */
   setCurrentOption(option) {
     if (this.currentOption) {
@@ -125,8 +168,19 @@ class FlowUiAutocomplete extends FlowRdfFormControl {
     }
     this.currentOption = option;
     option.current = true;
-    option.tabIndex = 0;
-    option.focus();
+    this.setActiveDescendant(option.id);
+    if (this.listbox) {
+      scrollIntoView(option, this.listbox, "vertical", "auto");
+    }
+  }
+  /**
+   * @internal
+   * Sets the input's `aria-activedescendant` to the given option `id`, or clears it (to `''`,
+   * per the APG reference) when passed `null` or an empty id. Centralises the ARIA wiring so the
+   * highlight and close paths stay in sync. See ADR-0001.
+   */
+  setActiveDescendant(id) {
+    this.input?.setAttribute("aria-activedescendant", id || "");
   }
   /**
    * @internal
@@ -171,6 +225,10 @@ class FlowUiAutocomplete extends FlowRdfFormControl {
   /** @internal Handle the `flow-ui-input` event from the input box. */
   handleInput(event) {
     event.stopPropagation();
+    this.inputChanged = true;
+    if (this.open) {
+      this.highlightCurrentOption();
+    }
     this.debouncedInput(this.input.value);
   }
   /** @internal Handle the `flow-ui-change` event from the input box */
@@ -226,12 +284,6 @@ class FlowUiAutocomplete extends FlowRdfFormControl {
       const currentIndex = this.currentOption ? allOptions.indexOf(this.currentOption) : 0;
       let newIndex = Math.max(0, currentIndex);
       event.preventDefault();
-      if (!this.open) {
-        this.show();
-        if (this.currentOption) {
-          return;
-        }
-      }
       switch (event.key) {
         case "ArrowDown": {
           newIndex = currentIndex + 1;
@@ -271,25 +323,39 @@ class FlowUiAutocomplete extends FlowRdfFormControl {
   removeListenersForDropdown() {
     document.removeEventListener("mousedown", this.handleDocumentEvent);
     document.removeEventListener("focusin", this.handleDocumentEvent);
-    document.addEventListener("keydown", this.handleDocumentEvent);
+    document.removeEventListener("keydown", this.handleDocumentEvent);
   }
   /** @internal Handles changes in the default slot */
   handleDefaultSlotChange() {
     const options = this.getAllOptions();
     this.hasOptions = options.length > 0;
+    this.assignOptionIds(options);
     this.toggleListbox();
-    const firstOption = this.getFirstOption();
-    if (firstOption) {
-      this.setCurrentOption(firstOption);
-    }
     this.setSelectedOption(null);
     for (const option of options) {
       if (option.value === this.value) {
         this.setSelectedOption(option);
-        this.setCurrentOption(option);
         break;
       }
     }
+    this.highlightCurrentOption();
+  }
+  /**
+   * @internal
+   * Establishes the highlighted ("current") option per the APG rules (ADR-0001):
+   * - while filtering (input text has changed): always the first option, so type-then-Enter
+   *   selects the narrowed-down top option.
+   * - on open with unchanged input: the selected option if one matches, else the first.
+   *
+   * Called both on slot change (list re-rendered) and on open (listbox shown without a
+   * re-render, e.g. clicking back into the input), since the latter fires no slot change.
+   */
+  highlightCurrentOption() {
+    const firstOption = this.getFirstOption();
+    const optionToHighlight = this.inputChanged ? firstOption : this.selectedOption ?? firstOption;
+    if (optionToHighlight) {
+      this.setCurrentOption(optionToHighlight);
+    }
   }
   /** @internal Toggles listbox based on focus and options in the default slot. */
   toggleListbox() {
@@ -310,13 +376,17 @@ class FlowUiAutocomplete extends FlowRdfFormControl {
   }
   async handleValueChange(oldValue, value) {
     if (value !== oldValue) {
+      this.inputChanged = false;
       await this.syncDisplayValue();
       const options = this.getAllOptions();
+      this.assignOptionIds(options);
       this.setSelectedOption(null);
       for (const option of options) {
         if (option.value === this.value) {
           this.setSelectedOption(option);
-          this.setCurrentOption(option);
+          if (this.open) {
+            this.setCurrentOption(option);
+          }
           break;
         }
       }
@@ -358,25 +428,59 @@ class FlowUiAutocomplete extends FlowRdfFormControl {
   }
   /** Shows the listbox. */
   async show() {
+    if (this.open && !this.closing) {
+      return;
+    }
+    const wasClosing = this.closing;
+    this.closing = false;
     if (!this.open) {
       this.emit("flow-ui-show");
-      await stopAnimations(this);
-      this.open = true;
-      const { keyframes, options } = getAnimation(this, "autocomplete.show", { dir: this.localize.dir() });
-      await animateTo(this.popup.popup, keyframes, options);
+    }
+    if (this.popup?.popup) {
+      await stopAnimations(this.popup.popup);
+    }
+    this.open = true;
+    await this.updateComplete;
+    this.highlightCurrentOption();
+    const { keyframes, options } = getAnimation(this, "autocomplete.show", { dir: this.localize.dir() });
+    await animateTo(this.popup.popup, keyframes, options);
+    if (this.currentOption && this.listbox) {
+      scrollIntoView(this.currentOption, this.listbox, "vertical", "auto");
+    }
+    if (!wasClosing) {
       this.emit("flow-ui-after-show");
     }
   }
   /** Hides the listbox. */
   async hide() {
-    if (this.open) {
-      this.emit("flow-ui-hide");
-      await stopAnimations(this);
-      const { keyframes, options } = getAnimation(this, "autocomplete.hide", { dir: this.localize.dir() });
-      await animateTo(this.popup.popup, keyframes, options);
-      this.open = false;
-      this.emit("flow-ui-after-hide");
+    if (!this.open || this.closing) {
+      return;
+    }
+    this.closing = true;
+    this.emit("flow-ui-hide");
+    if (this.currentOption) {
+      this.currentOption.current = false;
+    }
+    this.currentOption = null;
+    this.setActiveDescendant(null);
+    if (this.popup?.popup) {
+      await stopAnimations(this.popup.popup);
     }
+    const { keyframes, options } = getAnimation(this, "autocomplete.hide", { dir: this.localize.dir() });
+    await animateTo(this.popup.popup, keyframes, options);
+    if (!this.closing) {
+      return;
+    }
+    this.open = false;
+    this.closing = false;
+    this.inputChanged = false;
+    const strayOption = this.currentOption;
+    if (strayOption) {
+      strayOption.current = false;
+    }
+    this.currentOption = null;
+    this.setActiveDescendant(null);
+    this.emit("flow-ui-after-hide");
   }
   /** Gets the current value of the text input */
   getInputText() {
@@ -609,6 +713,9 @@ __decorateClass([
 __decorateClass([
   query(".autocomplete")
 ], FlowUiAutocomplete.prototype, "popup", 2);
+__decorateClass([
+  query(".autocomplete__listbox")
+], FlowUiAutocomplete.prototype, "listbox", 2);
 __decorateClass([
   watch("debounceDelay")
 ], FlowUiAutocomplete.prototype, "updateDebounceDelay", 1);