svelte-multiselect 10.1.0 → 10.2.0

package/dist/MultiSelect.svelte

@@ -26,7 +26,7 @@ export let filterFunc = (opt, searchText) => {
         return true;
     return `${get_label(opt)}`.toLowerCase().includes(searchText.toLowerCase());
 };
-export let focusInputOnSelect = `desktop`;
+export let closeDropdownOnSelect = `desktop`;
 export let form_input = null;
 export let highlightMatches = true;
 export let id = null;
@@ -186,10 +186,13 @@ function add(option, event) {
                 selected = selected.sort(sortSelected);
             }
         }
-        if (selected.length === maxSelect)
+        const reached_max_select = selected.length === maxSelect;
+        const dropdown_should_close = closeDropdownOnSelect === true ||
+            (closeDropdownOnSelect === `desktop` && window_width < breakpoint);
+        if (reached_max_select || dropdown_should_close) {
             close_dropdown(event);
-        else if (focusInputOnSelect === true ||
-            (focusInputOnSelect === `desktop` && window_width > breakpoint)) {
+        }
+        else if (!dropdown_should_close) {
             input?.focus();
         }
         dispatch(`add`, { option });
@@ -302,10 +305,10 @@ async function handle_keydown(event) {
     }
 }
 function remove_all() {
-    selected = [];
-    searchText = ``;
     dispatch(`removeAll`, { options: selected });
     dispatch(`change`, { options: selected, type: `removeAll` });
+    selected = [];
+    searchText = ``;
 }
 $: is_selected = (label) => selected.map(get_label).includes(label);
 const if_enter_or_space = (handler) => (event) => {
@@ -615,9 +618,9 @@ function highlight_matching_options(event) {
       {#if searchText}
         {@const text_input_is_duplicate = selected.map(get_label).includes(searchText)}
         {@const is_dupe = !duplicates && text_input_is_duplicate && `dupe`}
-        {@const can_create = allowUserOptions && createOptionMsg && `create`}
+        {@const can_create = Boolean(allowUserOptions && createOptionMsg) && `create`}
         {@const no_match =
-          matchingOptions?.length == 0 && noMatchingOptionsMsg && `no-match`}
+          Boolean(matchingOptions?.length == 0 && noMatchingOptionsMsg) && `no-match`}
         {@const msgType = is_dupe || can_create || no_match}
         {#if msgType}
           {@const msg = {

package/dist/MultiSelect.svelte.d.ts

@@ -17,7 +17,7 @@ declare class __sveltets_Render<Option extends T> {
         duplicates?: boolean | undefined;
         key?: ((opt: T) => unknown) | undefined;
         filterFunc?: ((opt: Option, searchText: string) => boolean) | undefined;
-        focusInputOnSelect?: boolean | "desktop" | undefined;
+        closeDropdownOnSelect?: boolean | "desktop" | undefined;
         form_input?: HTMLInputElement | null | undefined;
         highlightMatches?: boolean | undefined;
         id?: string | null | undefined;

package/package.json

@@ -5,7 +5,7 @@
   "homepage": "https://janosh.github.io/svelte-multiselect",
   "repository": "https://github.com/janosh/svelte-multiselect",
   "license": "MIT",
-  "version": "10.1.0",
+  "version": "10.2.0",
   "type": "module",
   "svelte": "./dist/index.js",
   "bugs": "https://github.com/janosh/svelte-multiselect/issues",
@@ -23,37 +23,37 @@
     "update-coverage": "vitest tests/unit --run --coverage && npx istanbul-badges-readme"
   },
   "dependencies": {
-    "svelte": "^4.0.5"
+    "svelte": "^4.2.0"
   },
   "devDependencies": {
     "@iconify/svelte": "^3.1.4",
-    "@playwright/test": "^1.36.1",
-    "@sveltejs/adapter-static": "^2.0.2",
-    "@sveltejs/kit": "^1.22.3",
-    "@sveltejs/package": "2.2.0",
-    "@sveltejs/vite-plugin-svelte": "2.4.2",
-    "@typescript-eslint/eslint-plugin": "^6.1.0",
-    "@typescript-eslint/parser": "^6.1.0",
-    "@vitest/coverage-v8": "^0.33.0",
-    "eslint": "^8.45.0",
-    "eslint-plugin-svelte": "^2.32.2",
-    "hastscript": "^7.2.0",
+    "@playwright/test": "^1.37.1",
+    "@sveltejs/adapter-static": "^2.0.3",
+    "@sveltejs/kit": "^1.24.1",
+    "@sveltejs/package": "2.2.2",
+    "@sveltejs/vite-plugin-svelte": "2.4.5",
+    "@typescript-eslint/eslint-plugin": "^6.7.0",
+    "@typescript-eslint/parser": "^6.7.0",
+    "@vitest/coverage-v8": "^0.34.4",
+    "eslint": "^8.49.0",
+    "eslint-plugin-svelte": "^2.33.1",
+    "hastscript": "^8.0.0",
     "highlight.js": "^11.8.0",
     "jsdom": "^22.1.0",
     "mdsvex": "^0.11.0",
-    "mdsvexamples": "^0.3.3",
-    "prettier": "^2.8.8",
-    "prettier-plugin-svelte": "^2.10.1",
-    "rehype-autolink-headings": "^6.1.1",
-    "rehype-slug": "^5.1.0",
-    "svelte-check": "^3.4.6",
+    "mdsvexamples": "^0.4.1",
+    "prettier": "^3.0.3",
+    "prettier-plugin-svelte": "^3.0.3",
+    "rehype-autolink-headings": "^7.0.0",
+    "rehype-slug": "^6.0.0",
+    "svelte-check": "^3.5.1",
     "svelte-preprocess": "^5.0.4",
-    "svelte-toc": "^0.5.5",
+    "svelte-toc": "^0.5.6",
     "svelte-zoo": "^0.4.9",
-    "svelte2tsx": "^0.6.19",
-    "typescript": "5.1.6",
-    "vite": "^4.4.4",
-    "vitest": "^0.33.0"
+    "svelte2tsx": "^0.6.21",
+    "typescript": "5.2.2",
+    "vite": "^4.4.9",
+    "vitest": "^0.34.4"
   },
   "keywords": [
     "svelte",

package/readme.md

@@ -194,10 +194,10 @@ Full list of props/bindable variables for this component. The `Option` type you
    Customize how dropdown options are filtered when user enters search string into `<MultiSelect />`. Defaults to:
 
 1. ```ts
-   focusInputOnSelect: boolean | 'desktop' = `desktop`
+   closeDropdownOnSelect: boolean | 'desktop' = `desktop`
    ```
 
-   One of `true`, `false` or `'desktop'`. Whether to set the cursor back to the input element after selecting an element. 'desktop' means only do so if current window width is larger than the current value of `breakpoint` prop (default 800).
+   One of `true`, `false` or `'desktop'`. Whether to close the dropdown list after selecting a dropdown item. If `true`, component will loose focus and `dropdown` is closed. `'desktop'` means `false` if current window width is larger than the current value of `breakpoint` prop (default is 800, meaning screen width in pixels). This is to align with the default behavior of many mobile browsers like Safari which close dropdowns after selecting an option while desktop browsers facilitate multi-selection by leaving dropdowns open.
 
 1. ```ts
    form_input: HTMLInputElement | null = null
@@ -397,13 +397,11 @@ Full list of props/bindable variables for this component. The `Option` type you
 1. `slot="disabled-icon"`: Custom icon to display inside the input when in `disabled` state. Receives no props. Use an empty `<span slot="disabled-icon" />` or `div` to remove the default disabled icon.
 1. `slot="expand-icon"`: Allows setting a custom icon to indicate to users that the Multiselect text input field is expandable into a dropdown list. Receives prop `open: boolean` which is true if the Multiselect dropdown is visible and false if it's hidden.
 1. `slot="remove-icon"`: Custom icon to display as remove button. Will be used both by buttons to remove individual selected options and the 'remove all' button that clears all options at once. Receives no props.
-1. `slot="user-msg"`: Displayed like a dropdown item when the list is empty and user is allowed to create custom options based on text input (or if the user's text input clashes with an existing option). `let:props`:
-   - `duplicateOptionMsg: string`: See [props](#🔣-props).
-   - `createOptionMsg: string`: See [props](#🔣-props).
-   - `textInputIsDuplicate: boolean`: Whether user has typed text that matches an already existing option.
-   - `searchText: string`: The text user typed into search input.
-   - `msg: string`: `duplicateOptionMsg` if user input is a duplicate else `createOptionMsg`.
-1. `slot='after-input'`: ForPlaced after the search input. For arbitrary content like icons or temporary messages. Receives props `selected`, `disabled`, `invalid`, `id`, `placeholder`, `open`, `required`.
+1. `slot="user-msg"`: Displayed like a dropdown item when the list is empty and user is allowed to create custom options based on text input (or if the user's text input clashes with an existing option). Receives props:
+   - `searchText`: The text user typed into search input.
+   - `msgType: false | 'create' | 'dupe' | 'no-match'`: `'dupe'` means user input is a duplicate of an existing option. `'create'` means user is allowed to convert their input into a new option not previously in the dropdown. `'no-match'` means user input doesn't match any dropdown items and users are not allowed to create new options. `false` means none of the above.
+   - `msg`: Will be `duplicateOptionMsg` or `createOptionMsg` (see [props](#🔣-props)) based on whether user input is a duplicate or can be created as new option. Note this slot replaces the default UI for displaying these messages so the slot needs to render them instead (unless purposely not showing a message).
+1. `slot='after-input'`: Placed after the search input. For arbitrary content like icons or temporary messages. Receives props `selected: Option[]`, `disabled: boolean`, `invalid: boolean`, `id: string | null`, `placeholder: string`, `open: boolean`, `required: boolean`. Can serve as a more dynamic, more customizable alternative to the `placeholder` prop.
 
 Example using several slots: