svelte-multiselect 4.0.5 → 4.0.6

package/MultiSelect.svelte

@@ -1,5 +1,4 @@
 <script >import { createEventDispatcher, tick } from 'svelte';
-import { fly } from 'svelte/transition';
 import CircleSpinner from './CircleSpinner.svelte';
 import { CrossIcon, ExpandIcon, DisabledIcon } from './icons';
 import Wiggle from './Wiggle.svelte';
@@ -36,6 +35,7 @@ export let removeBtnTitle = `Remove`;
 export let removeAllTitle = `Remove all`;
 export let defaultDisabledTitle = `This option is disabled`;
 export let allowUserOptions = false;
+export let addOptionMsg = `Create this option...`;
 export let autoScroll = true;
 export let loading = false;
 export let required = false;
@@ -49,29 +49,26 @@ if (!(options?.length > 0))
 if (!Array.isArray(selected))
     console.error(`selected prop must be an array`);
 const dispatch = createEventDispatcher();
-function isObject(item) {
+let activeMsg = false; // controls active state of <li>{addOptionMsg}</li>
+function is_object(item) {
     return typeof item === `object` && !Array.isArray(item) && item !== null;
 }
 // process proto options to full ones with mandatory labels
-$: _options = options.map((rawOp) => {
-    if (isObject(rawOp)) {
-        const option = { ...rawOp };
+$: _options = options.map((raw_op) => {
+    if (is_object(raw_op)) {
+        const option = { ...raw_op };
         if (option.value === undefined)
             option.value = option.label;
         return option;
     }
     else {
-        if (![`string`, `number`].includes(typeof rawOp)) {
-            console.warn(`MultiSelect options must be objects, strings or numbers, got ${typeof rawOp}`);
+        if (![`string`, `number`].includes(typeof raw_op)) {
+            console.warn(`MultiSelect options must be objects, strings or numbers, got ${typeof raw_op}`);
         }
         // even if we logged error above, try to proceed hoping user knows what they're doing
-        return { label: rawOp, value: rawOp };
+        return { label: raw_op, value: raw_op };
     }
 });
-$: labels = _options.map((op) => op.label);
-$: if (new Set(labels).size !== options.length) {
-    console.warn(`Option labels should be unique. Duplicates found: ${labels.filter((label, idx) => labels.indexOf(label) !== idx)}`);
-}
 let wiggle = false;
 $: selectedLabels = selected.map((op) => op.label);
 $: selectedValues = selected.map((op) => op.value);
@@ -83,38 +80,57 @@ $: if (formValue)
 // options matching the current search text
 $: matchingOptions = _options.filter((op) => filterFunc(op, searchText) && !selectedLabels.includes(op.label));
 $: matchingEnabledOptions = matchingOptions.filter((op) => !op.disabled);
+// add an option to selected list
 function add(label) {
     if (maxSelect && maxSelect > 1 && selected.length >= maxSelect)
         wiggle = true;
-    if (!selectedLabels.includes(label) &&
-        // for maxselect = 1 we always replace current option with new selection
-        (maxSelect === null || maxSelect === 1 || selected.length < maxSelect)) {
+    // to prevent duplicate selection, we could add `&& !selectedLabels.includes(label)`
+    if (maxSelect === null || maxSelect === 1 || selected.length < maxSelect) {
+        // first check if we find option in the options list
+        let option = _options.find((op) => op.label === label);
+        if (!option && // this has the side-effect of not allowing to user to add the same
+            // custom option twice in append mode
+            [true, `append`].includes(allowUserOptions) &&
+            searchText.length > 0) {
+            // user entered text but no options match, so if allowUserOptions=true | 'append', we create new option
+            option = { label: searchText, value: searchText };
+            if (allowUserOptions === `append`)
+                _options = [..._options, option];
+        }
         searchText = ``; // reset search string on selection
-        const option = _options.find((op) => op.label === label);
         if (!option) {
             console.error(`MultiSelect: option with label ${label} not found`);
             return;
         }
         if (maxSelect === 1) {
+            // for maxselect = 1 we always replace current option with new one
             selected = [option];
         }
         else {
-            selected = [option, ...selected];
+            selected = [...selected, option];
         }
         if (selected.length === maxSelect)
             setOptionsVisible(false);
+        else
+            input?.focus();
         dispatch(`add`, { option });
         dispatch(`change`, { option, type: `add` });
     }
 }
+// remove an option from selected list
 function remove(label) {
     if (selected.length === 0)
         return;
-    const option = _options.find((option) => option.label === label);
+    selected.splice(selectedLabels.lastIndexOf(label), 1);
+    selected = selected; // Svelte rerender after in-place splice
+    const option = _options.find((option) => option.label === label) ??
+        // if option with label could not be found but allowUserOptions is truthy,
+        // assume it was created by user and create correspondidng option object
+        // on the fly for use as event payload
+        (allowUserOptions && { label, value: label });
     if (!option) {
         return console.error(`MultiSelect: option with label ${label} not found`);
     }
-    selected = selected.filter((option) => label !== option.label);
     dispatch(`remove`, { option });
     dispatch(`change`, { option, type: `remove` });
 }
@@ -141,16 +157,15 @@ async function handleKeydown(event) {
     }
     // on enter key: toggle active option and reset search text
     else if (event.key === `Enter`) {
+        event.preventDefault(); // prevent enter key from triggering form submission
         if (activeOption) {
             const { label } = activeOption;
             selectedLabels.includes(label) ? remove(label) : add(label);
             searchText = ``;
         }
-        else if ([true, `append`].includes(allowUserOptions)) {
-            selected = [...selected, { label: searchText, value: searchText }];
-            if (allowUserOptions === `append`)
-                options = [...options, { label: searchText, value: searchText }];
-            searchText = ``;
+        else if (allowUserOptions && searchText.length > 0) {
+            // user entered text but no options match, so if allowUserOptions is truthy, we create new option
+            add(searchText);
         }
         // no active option and no search text means the options dropdown is closed
         // in which case enter means open it
@@ -159,11 +174,17 @@ async function handleKeydown(event) {
     }
     // on up/down arrow keys: update active option
     else if ([`ArrowDown`, `ArrowUp`].includes(event.key)) {
-        if (activeOption === null) {
-            // if no option is active yet, make first one active
+        // if no option is active yet, but there are matching options, make first one active
+        if (activeOption === null && matchingEnabledOptions.length > 0) {
             activeOption = matchingEnabledOptions[0];
             return;
         }
+        else if (allowUserOptions && searchText.length > 0) {
+            // if allowUserOptions is truthy and user entered text but no options match, we make
+            // <li>{addUserMsg}</li> active on keydown (or toggle it if already active)
+            activeMsg = !activeMsg;
+            return;
+        }
         const increment = event.key === `ArrowUp` ? -1 : 1;
         const newActiveIdx = matchingEnabledOptions.indexOf(activeOption) + increment;
         if (newActiveIdx < 0) {
@@ -185,10 +206,8 @@ async function handleKeydown(event) {
         }
     }
     // on backspace key: remove last selected option
-    else if (event.key === `Backspace`) {
-        const label = selectedLabels.pop();
-        if (label && !searchText)
-            remove(label);
+    else if (event.key === `Backspace` && selectedLabels.length > 0 && !searchText) {
+        remove(selectedLabels.at(-1));
     }
 }
 const removeAll = () => {
@@ -305,48 +324,55 @@ display above those of another following shortly after it -->
     {/if}
   {/if}
 
-  {#key showOptions}
-    <ul
-      class:hidden={!showOptions}
-      class="options {ulOptionsClass}"
-      transition:fly|local={{ duration: 300, y: 40 }}
-    >
-      {#each matchingOptions as option, idx}
-        {@const { label, disabled, title = null, selectedTitle } = option}
-        {@const { disabledTitle = defaultDisabledTitle } = option}
-        {@const active = activeOption?.label === label}
+  <ul class:hidden={!showOptions} class="options {ulOptionsClass}">
+    {#each matchingOptions as option, idx}
+      {@const { label, disabled, title = null, selectedTitle } = option}
+      {@const { disabledTitle = defaultDisabledTitle } = option}
+      {@const active = activeOption?.label === label}
+      <li
+        on:mousedown|stopPropagation
+        on:mouseup|stopPropagation={() => {
+          if (!disabled) isSelected(label) ? remove(label) : add(label)
+        }}
+        title={disabled ? disabledTitle : (isSelected(label) && selectedTitle) || title}
+        class:selected={isSelected(label)}
+        class:active
+        class:disabled
+        class="{liOptionClass} {active ? liActiveOptionClass : ``}"
+        on:mouseover={() => {
+          if (!disabled) activeOption = option
+        }}
+        on:focus={() => {
+          if (!disabled) activeOption = option
+        }}
+        on:mouseout={() => (activeOption = null)}
+        on:blur={() => (activeOption = null)}
+        aria-selected="false"
+      >
+        <slot name="option" {option} {idx}>
+          {option.label}
+        </slot>
+      </li>
+    {:else}
+      {#if allowUserOptions && searchText}
         <li
-          on:mouseup|preventDefault|stopPropagation
-          on:mousedown|preventDefault|stopPropagation={() => {
-            if (disabled) return
-            isSelected(label) ? remove(label) : add(label)
-          }}
-          title={disabled ? disabledTitle : (isSelected(label) && selectedTitle) || title}
-          class:selected={isSelected(label)}
-          class:active
-          class:disabled
-          class="{liOptionClass} {active ? liActiveOptionClass : ``}"
-          on:mouseover={() => {
-            if (disabled) return
-            activeOption = option
-          }}
-          on:focus={() => {
-            if (disabled) return
-            activeOption = option
-          }}
-          on:mouseout={() => (activeOption = null)}
-          on:blur={() => (activeOption = null)}
+          on:mousedown|stopPropagation
+          on:mouseup|stopPropagation={() => add(searchText)}
+          title={addOptionMsg}
+          class:active={activeMsg}
+          on:mouseover={() => (activeMsg = true)}
+          on:focus={() => (activeMsg = true)}
+          on:mouseout={() => (activeMsg = false)}
+          on:blur={() => (activeMsg = false)}
           aria-selected="false"
         >
-          <slot name="option" {option} {idx}>
-            {option.label}
-          </slot>
+          {addOptionMsg}
         </li>
       {:else}
         <span>{noOptionsMsg}</span>
-      {/each}
-    </ul>
-  {/key}
+      {/if}
+    {/each}
+  </ul>
 </div>
 
 <style>
@@ -455,9 +481,14 @@ display above those of another following shortly after it -->
     max-height: var(--sms-options-max-height, 50vh);
     overscroll-behavior: var(--sms-options-overscroll, none);
     box-shadow: var(--sms-options-shadow, 0 0 14pt -8pt black);
+    transition: all 0.2s;
+    opacity: 1;
+    transform: translateY(0);
   }
   :where(div.multiselect > ul.options.hidden) {
     visibility: hidden;
+    opacity: 0;
+    transform: translateY(50px);
   }
   :where(div.multiselect > ul.options > li) {
     padding: 3pt 2ex;

package/MultiSelect.svelte.d.ts

@@ -31,6 +31,7 @@ declare const __propDef: {
         removeAllTitle?: string | undefined;
         defaultDisabledTitle?: string | undefined;
         allowUserOptions?: boolean | "append" | undefined;
+        addOptionMsg?: string | undefined;
         autoScroll?: boolean | undefined;
         loading?: boolean | undefined;
         required?: boolean | undefined;
@@ -38,7 +39,7 @@ declare const __propDef: {
         invalid?: boolean | undefined;
     };
     events: {
-        mouseup: MouseEvent;
+        mousedown: MouseEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package.json

@@ -5,37 +5,38 @@
   "homepage": "https://svelte-multiselect.netlify.app",
   "repository": "https://github.com/janosh/svelte-multiselect",
   "license": "MIT",
-  "version": "4.0.5",
+  "version": "4.0.6",
   "type": "module",
   "svelte": "index.js",
   "bugs": "https://github.com/janosh/svelte-multiselect/issues",
   "devDependencies": {
     "@sveltejs/adapter-static": "^1.0.0-next.29",
-    "@sveltejs/kit": "^1.0.0-next.302",
-    "@sveltejs/vite-plugin-svelte": "^1.0.0-next.40",
-    "@typescript-eslint/eslint-plugin": "^5.16.0",
-    "@typescript-eslint/parser": "^5.16.0",
-    "@vitest/ui": "^0.7.9",
-    "eslint": "^8.11.0",
+    "@sveltejs/kit": "^1.0.0-next.308",
+    "@sveltejs/vite-plugin-svelte": "^1.0.0-next.41",
+    "@typescript-eslint/eslint-plugin": "^5.18.0",
+    "@typescript-eslint/parser": "^5.18.0",
+    "@vitest/ui": "^0.9.0",
+    "c8": "^7.11.0",
+    "eslint": "^8.12.0",
     "eslint-plugin-svelte3": "^3.4.1",
     "hastscript": "^7.0.2",
     "jsdom": "^19.0.0",
     "mdsvex": "^0.10.5",
-    "playwright": "^1.20.0",
-    "prettier": "^2.6.0",
+    "playwright": "^1.20.2",
+    "prettier": "^2.6.2",
     "prettier-plugin-svelte": "^2.6.0",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-slug": "^5.0.1",
-    "svelte": "^3.46.4",
+    "svelte": "^3.46.6",
     "svelte-check": "^2.4.6",
     "svelte-github-corner": "^0.1.0",
-    "svelte-preprocess": "^4.10.4",
+    "svelte-preprocess": "^4.10.5",
     "svelte-toc": "^0.2.9",
     "svelte2tsx": "^0.5.6",
     "tslib": "^2.3.1",
-    "typescript": "^4.6.2",
-    "vite": "^2.8.6",
-    "vitest": "^0.7.9"
+    "typescript": "^4.6.3",
+    "vite": "^2.9.1",
+    "vitest": "^0.9.0"
   },
   "keywords": [
     "svelte",

package/readme.md

@@ -105,6 +105,7 @@ Full list of props/bindable variables for this component:
 | `required`             | `false`                     | Whether forms can be submitted without selecting any options. Aborts submission, is scrolled into view and shows help "Please fill out" message when true and user tries to submit with no options selected.                                                                                                                                                                                                                      |
 | `autoScroll`           | `true`                      | `false` disables keeping the active dropdown items in view when going up/down the list of options with arrow keys.                                                                                                                                                                                                                                                                                                                |
 | `allowUserOptions`     | `false`                     | Whether users are allowed to enter values not in the dropdown list. `true` means add user-defined options to the selected list only, `'append'` means add to both options and selected.                                                                                                                                                                                                                                           |
+| `addOptionMsg`         | `'Create this option...'`   | Message shown to users after entering text when no options match their query and `allowUserOptions` is truthy.                                                                                                                                                                                                                                                                                                                    |
 | `loading`              | `false`                     | Whether the component should display a spinner to indicate it's in loading state. Use `<slot name='spinner'>` to specify a custom spinner.                                                                                                                                                                                                                                                                                        |
 | `removeBtnTitle`       | `'Remove'`                  | Title text to display when user hovers over button (cross icon) to remove selected option.                                                                                                                                                                                                                                                                                                                                        |
 | `removeAllTitle`       | `'Remove all'`              | Title text to display when user hovers over remove-all button.                                                                                                                                                                                                                                                                                                                                                                    |
@@ -281,7 +282,7 @@ The second method allows you to pass in custom classes to the important DOM elem
 - `liOptionClass`
 - `liActiveOptionClass`
 
-This simplified version of the DOM structure of this component shows where these classes are inserted:
+This simplified version of the DOM structure of the component shows where these classes are inserted:
 
 ```svelte
 <div class="multiselect {outerDivClass}">