Expose onApply on MultiSelectMenu and MultiSelectField (#479)

* Dispatch `apply` event when applying from MultiSelect * Expose `onApply` on `MultiSelectMenu` and `MultiSelectField` * Expose `onApply` on `MultiSelectMenu` and `MultiSelectField`
techniq · Sep 10, 2024 · e742a87 · e742a87
1 parent 8a38507
commit e742a87
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 0 deletions.
diff --git a/.changeset/polite-rivers-roll.md b/.changeset/polite-rivers-roll.md
@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+Dispatch `apply` event when applying from MultiSelect
diff --git a/packages/svelte-ux/src/lib/components/MultiSelectField.svelte b/packages/svelte-ux/src/lib/components/MultiSelectField.svelte
@@ -62,6 +62,9 @@
 
   export let menuProps: Omit<MultiSelectMenuProps, 'options'> | undefined = undefined;
 
+  // Passthrough onApply event
+  export let onApply: MultiSelectMenuProps['onApply'] | undefined = undefined;
+
   const logger = new Logger('MultiSelectField');
 
   let open = false;
@@ -213,6 +216,7 @@
     {placement}
     {infiniteScroll}
     {searchText}
+    {onApply}
     classes={{ ...settingsClasses.multiSelectMenu, ...classes.multiSelectMenu }}
     matchWidth
     bind:open

diff --git a/packages/svelte-ux/src/lib/components/MultiSelectMenu.svelte b/packages/svelte-ux/src/lib/components/MultiSelectMenu.svelte
@@ -37,6 +37,9 @@
   const settingsClasses = getComponentClasses('MultiSelectMenu');
 
   export let menuItemsEl: HTMLMenuElement | undefined = undefined;
+
+  // Passthrough onApply event
+  export let onApply: MultiSelectProps['onApply'] | undefined = undefined;
 </script>
 
 <Menu
@@ -67,6 +70,7 @@
     {placeholder}
     {infiniteScroll}
     {searchText}
+    {onApply}
     classes={{
       search: 'p-2',
       options: 'px-2',