svelte-multiselect 6.0.3 → 6.1.0

package/MultiSelect.svelte

@@ -48,6 +48,8 @@ export let selectedValues = [];
 export let sortSelected = false;
 export let ulOptionsClass = ``;
 export let ulSelectedClass = ``;
+export let inputmode = ``;
+export let pattern = ``;
 if (!(options?.length > 0)) {
     if (allowUserOptions) {
         options = []; // initializing as array avoids errors when component mounts
@@ -85,9 +87,9 @@ if (activeIndex !== null && !matchingOptions[activeIndex]) {
     throw `Run time error, activeIndex=${activeIndex} is out of bounds, matchingOptions.length=${matchingOptions.length}`;
 }
 // update activeOption when activeIndex changes
-$: activeOption = activeIndex ? matchingOptions[activeIndex] : null;
+$: activeOption = activeIndex !== null ? matchingOptions[activeIndex] : null;
 // add an option to selected list
-function add(label) {
+function add(label, event) {
     if (maxSelect && maxSelect > 1 && selected.length >= maxSelect)
         wiggle = true;
     // to prevent duplicate selection, we could add `&& !selectedLabels.includes(label)`
@@ -139,7 +141,7 @@ function add(label) {
             }
         }
         if (selected.length === maxSelect)
-            close_dropdown();
+            close_dropdown(event);
         else if (focusInputOnSelect === true ||
             (focusInputOnSelect === `desktop` && window_width > breakpoint)) {
             input?.focus();
@@ -165,24 +167,27 @@ function remove(label) {
     dispatch(`remove`, { option });
     dispatch(`change`, { option, type: `remove` });
 }
-function open_dropdown() {
+function open_dropdown(event) {
     if (disabled)
         return;
     open = true;
-    input?.focus();
-    dispatch(`focus`);
+    if (!(event instanceof FocusEvent)) {
+        // avoid double-focussing input when event that opened dropdown was already input FocusEvent
+        input?.focus();
+    }
+    dispatch(`open`, { event });
 }
-function close_dropdown() {
+function close_dropdown(event) {
     open = false;
     input?.blur();
     activeOption = null;
-    dispatch(`blur`);
+    dispatch(`close`, { event });
 }
 // handle all keyboard events this component receives
 async function handle_keydown(event) {
     // on escape or tab out of input: dismiss options dropdown and reset search text
     if (event.key === `Escape` || event.key === `Tab`) {
-        close_dropdown();
+        close_dropdown(event);
         searchText = ``;
     }
     // on enter key: toggle active option and reset search text
@@ -190,17 +195,17 @@ async function handle_keydown(event) {
         event.preventDefault(); // prevent enter key from triggering form submission
         if (activeOption) {
             const label = get_label(activeOption);
-            selectedLabels.includes(label) ? remove(label) : add(label);
+            selectedLabels.includes(label) ? remove(label) : add(label, event);
             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);
+            add(searchText, event);
         }
         // no active option and no search text means the options dropdown is closed
         // in which case enter means open it
         else
-            open_dropdown();
+            open_dropdown(event);
     }
     // on up/down arrow keys: update active option
     else if ([`ArrowDown`, `ArrowUp`].includes(event.key)) {
@@ -257,7 +262,7 @@ const if_enter_or_space = (handler) => (event) => {
 };
 function on_click_outside(event) {
     if (outerDiv && !outerDiv.contains(event.target)) {
-        close_dropdown();
+        close_dropdown(event);
     }
 }
 </script>
@@ -321,13 +326,29 @@ function on_click_outside(event) {
         bind:value={searchText}
         on:mouseup|self|stopPropagation={open_dropdown}
         on:keydown={handle_keydown}
+        on:focus
         on:focus={open_dropdown}
         {id}
         {name}
         {disabled}
+        {inputmode}
+        {pattern}
         placeholder={selectedLabels.length ? `` : placeholder}
         aria-invalid={invalid ? `true` : null}
+        on:blur
+        on:change
+        on:click
+        on:keydown
+        on:keyup
+        on:mousedown
+        on:mouseenter
+        on:mouseleave
+        on:touchcancel
+        on:touchend
+        on:touchmove
+        on:touchstart
       />
+      <!-- the above on:* lines forward potentially useful DOM events -->
     </li>
   </ul>
   {#if loading}
@@ -375,8 +396,8 @@ function on_click_outside(event) {
         {@const active = activeIndex === idx}
         <li
           on:mousedown|stopPropagation
-          on:mouseup|stopPropagation={() => {
-            if (!disabled) is_selected(label) ? remove(label) : add(label)
+          on:mouseup|stopPropagation={(event) => {
+            if (!disabled) is_selected(label) ? remove(label) : add(label, event)
           }}
           title={disabled
             ? disabledTitle
@@ -407,7 +428,7 @@ function on_click_outside(event) {
         {#if allowUserOptions && searchText}
           <li
             on:mousedown|stopPropagation
-            on:mouseup|stopPropagation={() => add(searchText)}
+            on:mouseup|stopPropagation={(event) => add(searchText, event)}
             title={addOptionMsg}
             class:active={add_option_msg_is_active}
             on:mouseover={() => (add_option_msg_is_active = true)}

package/MultiSelect.svelte.d.ts

@@ -43,6 +43,8 @@ declare const __propDef: {
         sortSelected?: boolean | ((op1: Option, op2: Option) => number) | undefined;
         ulOptionsClass?: string | undefined;
         ulSelectedClass?: string | undefined;
+        inputmode?: string | undefined;
+        pattern?: string | undefined;
     };
     slots: {
         selected: {

package/index.d.ts

@@ -25,11 +25,27 @@ export declare type DispatchEvents = {
         options?: Option[];
         type: 'add' | 'remove' | 'removeAll';
     };
-    focus: undefined;
-    blur: undefined;
+    open: {
+        event: Event;
+    };
+    close: {
+        event: Event;
+    };
 };
 export declare type MultiSelectEvents = {
     [key in keyof DispatchEvents]: CustomEvent<DispatchEvents[key]>;
+} & {
+    blur: FocusEvent;
+    click: MouseEvent;
+    focus: FocusEvent;
+    keydown: KeyboardEvent;
+    keyup: KeyboardEvent;
+    mouseenter: MouseEvent;
+    mouseleave: MouseEvent;
+    touchcancel: TouchEvent;
+    touchend: TouchEvent;
+    touchmove: TouchEvent;
+    touchstart: TouchEvent;
 };
 export declare const get_label: (op: Option) => string | number;
 export declare const get_value: (op: Option) => {};

package/package.json

@@ -5,20 +5,20 @@
   "homepage": "https://svelte-multiselect.netlify.app",
   "repository": "https://github.com/janosh/svelte-multiselect",
   "license": "MIT",
-  "version": "6.0.3",
+  "version": "6.1.0",
   "type": "module",
   "svelte": "index.js",
   "main": "index.js",
   "bugs": "https://github.com/janosh/svelte-multiselect/issues",
   "devDependencies": {
-    "@playwright/test": "^1.25.2",
+    "@playwright/test": "^1.26.0",
     "@sveltejs/adapter-static": "^1.0.0-next.43",
-    "@sveltejs/kit": "^1.0.0-next.481",
-    "@sveltejs/package": "^1.0.0-next.3",
-    "@sveltejs/vite-plugin-svelte": "^1.0.5",
-    "@typescript-eslint/eslint-plugin": "^5.37.0",
-    "@typescript-eslint/parser": "^5.37.0",
-    "eslint": "^8.23.1",
+    "@sveltejs/kit": "^1.0.0-next.502",
+    "@sveltejs/package": "^1.0.0-next.5",
+    "@sveltejs/vite-plugin-svelte": "^1.0.8",
+    "@typescript-eslint/eslint-plugin": "^5.38.0",
+    "@typescript-eslint/parser": "^5.38.0",
+    "eslint": "^8.24.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "hastscript": "^7.0.2",
     "jsdom": "^20.0.0",
@@ -32,11 +32,11 @@
     "svelte-github-corner": "^0.1.0",
     "svelte-preprocess": "^4.10.6",
     "svelte-toc": "^0.4.0",
-    "svelte2tsx": "^0.5.17",
+    "svelte2tsx": "^0.5.18",
     "tslib": "^2.4.0",
     "typescript": "^4.8.3",
-    "vite": "^3.1.0",
-    "vitest": "^0.23.2"
+    "vite": "^3.1.3",
+    "vitest": "^0.23.4"
   },
   "keywords": [
     "svelte",

package/readme.md

@@ -9,7 +9,7 @@
 [![Netlify Status](https://api.netlify.com/api/v1/badges/a45b62c3-ea45-4cfd-9912-77ec4fc8d7e8/deploy-status)](https://app.netlify.com/sites/svelte-multiselect/deploys)
 [![NPM version](https://img.shields.io/npm/v/svelte-multiselect?logo=NPM&color=purple)](https://npmjs.com/package/svelte-multiselect)
 [![Needs Svelte version](https://img.shields.io/npm/dependency-version/svelte-multiselect/dev/svelte?color=teal)](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md)
-[![REPL](https://img.shields.io/badge/Svelte-REPL-blue)](https://svelte.dev/repl/a5a14b8f15d64cb083b567292480db05)
+[![REPL](https://img.shields.io/badge/Svelte-REPL-blue?logo=Svelte)](https://svelte.dev/repl/a5a14b8f15d64cb083b567292480db05)
 [![Open in StackBlitz](https://img.shields.io/badge/Open%20in-StackBlitz-darkblue?logo=stackblitz)](https://stackblitz.com/github/janosh/svelte-multiselect)
 
 </h4>
@@ -40,6 +40,7 @@
 - **v6.0.0** The prop `showOptions` which controls whether the list of dropdown options is currently open or closed was renamed to `open`. See [PR 103](https://github.com/janosh/svelte-multiselect/pull/103).
 - **v6.0.1** The prop `disabledTitle` which sets the title of the `<MultiSelect>` `<input>` node if in `disabled` mode was renamed to `disabledInputTitle`. See [PR 105](https://github.com/janosh/svelte-multiselect/pull/105).
 - **v6.0.1** The default margin of `1em 0` on the wrapper `div.multiselect` was removed. Instead, there is now a new CSS variable `--sms-margin`. Set it to `--sms-margin: 1em 0;` to restore the old appearance. See [PR 105](https://github.com/janosh/svelte-multiselect/pull/105).
+- **6.1.0** The `dispatch` events `focus` and `blur` were renamed to `open` and `close`, respectively. These actions refer to the dropdown list, i.e. `<MultiSelect on:open={(event) => console.log(event)}>` will trigger when the dropdown list opens. The focus and blur events are now regular DOM (not Svelte `dispatch`) events emitted by the `<input>` node. See [PR 120](https://github.com/janosh/svelte-multiselect/pull/120).
 
 ## Installation
 
@@ -97,7 +98,8 @@ import type { Option } from 'svelte-multiselect'
    allowUserOptions: boolean | 'append' = 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.
+   Whether users can enter values that are not in the dropdown list. `true` means add user-defined options to the selected list only, `'append'` means add to both options and selected.
+   If `allowUserOptions` is `true` or `'append'` then the type `object | number | string` of entered value is determined from the first option of the list to keep type homogeneity.
 
 1. ```ts
    autocomplete: string = `off`
@@ -287,11 +289,16 @@ import type { Option } from 'svelte-multiselect'
    Default behavior is to render selected items in the order they were chosen. `sortSelected={true}` uses default JS array sorting. A compare function enables custom logic for sorting selected options. See the [`/sort-selected`](https://svelte-multiselect.netlify.app/sort-selected) example.
 
 1. ```ts
-   userInputAs: 'string' | 'number' | 'object' =
-    options.length > 0 ? (typeof options[0] as 'object' | 'string' | 'number') : 'string'
+   inputmode: string = ``
    ```
 
-   What type new options created from user text input should be. Only relevant if `allowUserOptions=true | 'append'`. If not explicitly set, we default `userInputAs` to the type of the 1st option (if available, else `string`) to keep type homogeneity. E.g. if MultiSelect already contains at least one option and it's an object, new options from user-entered text will take the shape `{label: userText, value: userText}`. Likewise if the 1st existing option is a number of string. If MultiSelect starts out empty but you still want user-created custom options to be objects, pass `userInputAs='object'`.
+   The `inputmode` attribute hints at the type of data the user may enter. Values like `'numeric' | 'tel' | 'email'` allow browsers to display an appropriate virtual keyboard. See [MDN](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/inputmode) for details.
+
+1. ```ts
+   pattern: string = ``
+   ```
+
+   The pattern attribute specifies a regular expression which the input's value must match. If a non-null value doesn't match the `pattern` regex, the read-only `patternMismatch` property will be `true`. See [MDN](https://developer.mozilla.org/docs/Web/HTML/Attributes/pattern) for details.
 
 ## Slots
 
@@ -353,10 +360,16 @@ Example:
    Triggers when an option is either added or removed, or all options are removed at once. `type` is one of `'add' | 'remove' | 'removeAll'` and payload will be `option: Option` or `options: Option[]`, respectively.
 
 1. ```ts
-   on:blur={() => console.log('Multiselect input lost focus')}
+   on:open={(event) => console.log(`Multiselect dropdown was opened by ${event}`)}
+   ```
+
+   Triggers when the dropdown list of options appears. Event is the DOM's `FocusEvent`,`KeyboardEvent` or `ClickEvent` that initiated this Svelte `dispatch` event.
+
+1. ```ts
+   on:close={(event) => console.log(`Multiselect dropdown was closed by ${event}`)}
    ```
 
-   Triggers when the input field looses focus.
+   Triggers when the dropdown list of options disappears. Event is the DOM's `FocusEvent`, `KeyboardEvent` or `ClickEvent` that initiated this Svelte `dispatch` event.
 
 For example, here's how you might annoy your users with an alert every time one or more options are added or removed:
 
@@ -372,6 +385,15 @@ For example, here's how you might annoy your users with an alert every time one
 
 > Note: Depending on the data passed to the component the `options(s)` payload will either be objects or simple strings/numbers.
 
+This component also forwards many DOM events from the `<input>` node: `blur`, `change`, `click`, `keydown`, `keyup`, `mousedown`, `mouseenter`, `mouseleave`, `touchcancel`, `touchend`, `touchmove`, `touchstart`. You can register listeners for these just like for the above [Svelte `dispatch` events](https://svelte.dev/tutorial/component-events):
+
+```svelte
+<MultiSelect
+  options={[1, 2, 3]}
+  on:keyup={(event) => console.log('key', event.target.value)}
+/>
+```
+
 ## TypeScript
 
 TypeScript users can import the types used for internal type safety:
@@ -486,9 +508,9 @@ This simplified version of the DOM structure of the component shows where these
 </div>
 ```
 
-### Granular control through global CSS
+### With global CSS
 
-You can alternatively style every part of this component with more fine-grained control by using the following `:global()` CSS selectors. `ul.selected` is the list of currently selected options rendered inside the component's input whereas `ul.options` is the list of available options that slides out when the component has focus.
+Odd as it may seem, you get the most fine-grained control over the styling of every part of this component by using the following `:global()` CSS selectors. `ul.selected` is the list of currently selected options rendered inside the component's input whereas `ul.options` is the list of available options that slides out when the component is in its `open` state. See also [simplified DOM structure](#styling).
 
 ```css
 :global(div.multiselect) {