stimeo-ui 0.18.0 → 0.18.1

package/dist/controllers/multi_select_controller.d.ts

@@ -193,8 +193,9 @@ declare class MultiSelectController extends Controller<HTMLElement> {
      * list shown without one is a popup no assistive technology is told about. So
      * opening is skipped entirely, where {@link MultiSelectController.close | close}
      * still closes.
+     * A focus action delivered by chip Tab keeps the list closed.
      */
-    open(): void;
+    open(event?: Event): void;
     /**
      * Closes the list and clears the active option.
      *

package/dist/controllers/multi_select_controller.js

@@ -1118,7 +1118,9 @@ var MultiSelectController = class _MultiSelectController extends Controller {
     focusAfterEnd: () => this.#focusInput()
   });
   #listeners = new ListenerSet();
+  #tab = null;
   connect() {
+    this.#tab = null;
     this.#tabindex.reclaim(this.element);
     this.#rows.connect();
     this.#normalizeSelection([]);
@@ -1130,6 +1132,9 @@ var MultiSelectController = class _MultiSelectController extends Controller {
     this.#selectionValues = this.#values;
     this.#syncFields();
     this.#listeners.add(document, "click", this.#onOutsideClick, { capture: true });
+    this.#listeners.add(this.element, "keydown", this.#onTab);
+    for (const type of ["focus", "keydown", "keyup", "pointerdown"])
+      this.#listeners.add(document, type, this.#trackTab, { capture: true });
     this.#connected = true;
     this.#reconcile.observe(this.element);
   }
@@ -1151,6 +1156,7 @@ var MultiSelectController = class _MultiSelectController extends Controller {
     this.#composition.disconnect();
     this.#chipRow.disconnect();
     this.#listeners.dispose();
+    this.#tab = null;
     this.#releaseTabindex();
   }
   optionTargetConnected() {
@@ -1320,7 +1326,11 @@ var MultiSelectController = class _MultiSelectController extends Controller {
     this.#setActive(visible[0] ?? null);
     this.dispatch("filter", { detail: { query } });
   }
-  open() {
+  open(event) {
+    if (event instanceof FocusEvent && event === this.#tab) {
+      this.#tab = null;
+      return;
+    }
     if (!this.hasListTarget || !this.hasInputTarget) {
       this.#reflectEmpty();
       return;
@@ -1407,6 +1417,16 @@ var MultiSelectController = class _MultiSelectController extends Controller {
         break;
     }
   }
+  #onTab = (event) => {
+    if (event.key !== "Tab" || event.defaultPrevented || event.isComposing || !this.hasTagsTarget || !this.tagsTarget.contains(event.target))
+      return;
+    this.#tab = event;
+    this.close();
+  };
+  #trackTab = (event) => {
+    const key = this.#tab;
+    this.#tab = event.type === "focus" && key instanceof KeyboardEvent && !key.defaultPrevented && event.target === this.inputTargets[0] ? event : null;
+  };
   toggleOption(source) {
     const { event, host, origin, reason } = actionSource(source);
     if (origin && origin.closest(`[data-controller~="${this.identifier}"]`) !== this.element)