[MultiSelect] Add autoFocusSearch to opt into functionality, which MultiSelectMenu maintains

.changeset/ninety-beers-return.md

@@ -0,0 +1,5 @@
+---
+"svelte-ux": patch
+---
+
+[MultiSelect] Add `autoFocusSearch` to opt into functionality, which `MultiSelectMenu` maintains

packages/svelte-ux/src/lib/actions/input.ts

@@ -3,12 +3,17 @@ import type { Action } from 'svelte/action';
 /**
  * Auto focus node when rendered.  Useful for inputs
  */
-export function autoFocus(node: HTMLElement | SVGElement, options?: { delay?: number }) {
+export function autoFocus(
+  node: HTMLElement | SVGElement,
+  options?: { delay?: number; disabled?: boolean }
+) {
   // TODO: Add options to "restoreFocus" on destroy()
   // const elementFocused = document.activeElement as HTMLElement;
-  setTimeout(() => {
-    node.focus();
-  }, options?.delay ?? 0);
+  if (options?.disabled !== true) {
+    setTimeout(() => {
+      node.focus();
+    }, options?.delay ?? 0);
+  }
 }
 
 /**

packages/svelte-ux/src/lib/components/MultiSelect.svelte

@@ -24,6 +24,7 @@
   export let indeterminateSelected: string[] = [];
   export let duration = 200;
   export let inlineSearch = false;
+  export let autoFocusSearch = false;
   export let placeholder = 'Search items';
 
   /** Wrap options in `InfiniteScroll` to amortize rendering of a large number of options */
@@ -116,7 +117,7 @@
       {placeholder}
       iconRight={mdiMagnify}
       bind:value={searchText}
-      autofocus={{ delay: 100 }}
+      autofocus={{ delay: 100, disabled: !autoFocusSearch }}
     />
   </div>
 {/if}

packages/svelte-ux/src/lib/components/MultiSelectMenu.svelte

@@ -19,6 +19,7 @@
   export let placement: Placement = 'bottom-start';
   export let autoPlacement = true;
   export let inlineSearch = false;
+  export let autoFocusSearch = inlineSearch;
   export let placeholder: string | undefined = undefined;
   export let infiniteScroll = false;
   export let searchText = '';
@@ -59,6 +60,7 @@
     {open}
     {duration}
     {inlineSearch}
+    {autoFocusSearch}
     {placeholder}
     {infiniteScroll}
     {labelProp}