svelte-multiselect 8.2.0 → 8.2.1

package/MultiSelect.svelte

@@ -238,7 +238,7 @@ async function handle_keydown(event) {
             activeIndex = 0;
             return;
         }
-        else if (allowUserOptions && searchText.length > 0) {
+        else if (allowUserOptions && !matchingOptions.length && 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)
             add_option_msg_is_active = !add_option_msg_is_active;
@@ -248,7 +248,8 @@ async function handle_keydown(event) {
             // if no option is active and no options are matching, do nothing
             return;
         }
-        // if none of the abvove special cases apply, we make next/prev option
+        event.preventDefault();
+        // if none of the above special cases apply, we make next/prev option
         // active with wrap around at both ends
         const increment = event.key === `ArrowUp` ? -1 : 1;
         activeIndex = (activeIndex + increment) % matchingOptions.length;
@@ -393,37 +394,39 @@ const dragstart = (idx) => (event) => {
         {/if}
       </li>
     {/each}
-    <input
-      class={inputClass}
-      bind:this={input}
-      {autocomplete}
-      bind:value={searchText}
-      on:mouseup|self|stopPropagation={open_dropdown}
-      on:keydown|stopPropagation={handle_keydown}
-      on:focus
-      on:focus={open_dropdown}
-      {id}
-      {disabled}
-      {inputmode}
-      {pattern}
-      placeholder={selected.length == 0 ? placeholder : null}
-      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
-      style:min-width={open ? `3em` : `0`}
-    />
+    <li style="display: contents;">
+      <input
+        class={inputClass}
+        bind:this={input}
+        {autocomplete}
+        bind:value={searchText}
+        on:mouseup|self|stopPropagation={open_dropdown}
+        on:keydown|stopPropagation={handle_keydown}
+        on:focus
+        on:focus={open_dropdown}
+        {id}
+        {disabled}
+        {inputmode}
+        {pattern}
+        placeholder={selected.length == 0 ? placeholder : null}
+        aria-invalid={invalid ? `true` : null}
+        ondrop="return false"
+        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>
-  <!-- the above on:* lines forward potentially useful DOM events -->
   {#if loading}
     <slot name="spinner">
       <CircleSpinner />
@@ -533,7 +536,7 @@ const dragstart = (idx) => (event) => {
     border: var(--sms-border, 1pt solid lightgray);
     border-radius: var(--sms-border-radius, 3pt);
     background: var(--sms-bg);
-    width: var(--sms-width, 100%);
+    width: var(--sms-width);
     max-width: var(--sms-max-width);
     padding: var(--sms-padding, 0 3pt);
     color: var(--sms-text-color);
@@ -603,19 +606,19 @@ const dragstart = (idx) => (event) => {
     margin: auto 0; /* CSS reset */
     padding: 0; /* CSS reset */
   }
-  :where(div.multiselect > ul.selected > input) {
+  :where(div.multiselect > ul.selected > li > input) {
     border: none;
     outline: none;
     background: none;
+    flex: 1; /* this + next line fix issue #12 https://git.io/JiDe3 */
+    min-width: 2em;
     /* ensure input uses text color and not --sms-selected-text-color */
     color: var(--sms-text-color);
     font-size: inherit;
     cursor: inherit; /* needed for disabled state */
     border-radius: 0; /* reset ul.selected > li */
-    width: 100%;
-    flex: 1;
   }
-  :where(div.multiselect > ul.selected > input::placeholder) {
+  :where(div.multiselect > ul.selected > li > input::placeholder) {
     padding-left: 5pt;
     color: var(--sms-placeholder-color);
     opacity: var(--sms-placeholder-opacity);

package/changelog.md

@@ -2,8 +2,21 @@
 
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
+#### [v8.2.1](https://github.com/janosh/svelte-multiselect/compare/v8.2.0...v8.2.1)
+
+- Fix `allowUserOptions` preventing dropdown list navigation with up/down arrow keys [`#184`](https://github.com/janosh/svelte-multiselect/pull/184)
+- Mdsvexamples [`#182`](https://github.com/janosh/svelte-multiselect/pull/182)
+- Add changelog & contributing pages to site [`#181`](https://github.com/janosh/svelte-multiselect/pull/181)
+- tweak contributing.md and css-classes example [`6f78033`](https://github.com/janosh/svelte-multiselect/commit/6f78033826beb34cd00bf3282c93ac5328905735)
+- fix build error [`b896d36`](https://github.com/janosh/svelte-multiselect/commit/b896d3643a0988b0d0bed832ba46bcad0e2c4494)
+- fix readme badge for gh-pages.yml status [`906b560`](https://github.com/janosh/svelte-multiselect/commit/906b56024a826ed45263197b1267015d88f0a660)
+
+<!-- auto-changelog-above -->
+
 #### [v8.2.0](https://github.com/janosh/svelte-multiselect/compare/v8.1.0...v8.2.0)
 
+> 30 November 2022
+
 - Draggable selected options [`#178`](https://github.com/janosh/svelte-multiselect/pull/178)
 - Fix page navigation in GH pages, broken because served from non-apex domain [`#172`](https://github.com/janosh/svelte-multiselect/pull/172)
 - Publish docs to GitHub pages [`#170`](https://github.com/janosh/svelte-multiselect/pull/170)
@@ -11,11 +24,9 @@ All notable changes to this project will be documented in this file. Dates are d
 - add missing about field to bug-report issue template (closes #171) [`#171`](https://github.com/janosh/svelte-multiselect/issues/171)
 - add changelog.md [`236d238`](https://github.com/janosh/svelte-multiselect/commit/236d238c5fa1ce5f07cf08c09861da4d8446acb2)
 - fix prop form_input: set default value null to make it optional [`b150fe0`](https://github.com/janosh/svelte-multiselect/commit/b150fe0032ebde82a319b23bd5e6b573e0c31721)
-- set aliveStatusCodes: [200, 429] in .github/workflows/link-check-config.json [`b34c7bf`](https://github.com/janosh/svelte-multiselect/commit/b34c7bf99d4afa96dcd3c9c322ab4e94b1ef3a39)
+- set `aliveStatusCodes: [200, 429]` in `.github/workflows/link-check-config.json` [`b34c7bf`](https://github.com/janosh/svelte-multiselect/commit/b34c7bf99d4afa96dcd3c9c322ab4e94b1ef3a39)
 - add changelog script to `package.json` [`c943617`](https://github.com/janosh/svelte-multiselect/commit/c9436171033e06e8098f4443ed40d48ddee35167)
 
-<!-- auto-changelog-above -->
-
 #### [v8.1.0](https://github.com/janosh/svelte-multiselect/compare/v8.0.4...v8.1.0)
 
 > 18 November 2022
@@ -41,7 +52,7 @@ All notable changes to this project will be documented in this file. Dates are d
 - Test uncovered lines [`#157`](https://github.com/janosh/svelte-multiselect/pull/157)
 - Don't `console.error` about missing `options` if `loading=true` [`#156`](https://github.com/janosh/svelte-multiselect/pull/156)
 - Measure `vitest` coverage with `c8` [`#155`](https://github.com/janosh/svelte-multiselect/pull/155)
-- increase --sms-min-height 19-&gt;22pt [`5d0e081`](https://github.com/janosh/svelte-multiselect/commit/5d0e0815d0b488ae23b439a3f085dd083138c326)
+- increase --sms-min-height 19->`22pt [`5d0e081`](<https://github.com/janosh/svelte-multiselect/commit/5d0e0815d0b488ae23b439a3f085dd083138c326>)
 
 #### [v8.0.2](https://github.com/janosh/svelte-multiselect/compare/v8.0.1...v8.0.2)
 
@@ -67,7 +78,7 @@ All notable changes to this project will be documented in this file. Dates are d
 - Add new prop `value` [`#138`](https://github.com/janosh/svelte-multiselect/pull/138)
 - New prop resetFilterOnAdd [`#137`](https://github.com/janosh/svelte-multiselect/pull/137)
 - `yarn` to `pnpm` [`#134`](https://github.com/janosh/svelte-multiselect/pull/134)
-- Rename prop `noOptionsMsg`-&gt;`noMatchingOptionsMsg` [`#133`](https://github.com/janosh/svelte-multiselect/pull/133)
+- Rename prop `noOptionsMsg -> noMatchingOptionsMsg` [`#133`](https://github.com/janosh/svelte-multiselect/pull/133)
 - remove props selectedLabels and selectedValues [`ef6598e`](https://github.com/janosh/svelte-multiselect/commit/ef6598e8b0dc1f2f8cb687074463cb73b2f9ebff)
 
 #### [v7.1.0](https://github.com/janosh/svelte-multiselect/compare/v7.0.2...v7.1.0)
@@ -173,7 +184,7 @@ All notable changes to this project will be documented in this file. Dates are d
 
 - Replace `li.scrollIntoViewIfNeeded()` with `li.scrollIntoView()` [`#88`](https://github.com/janosh/svelte-multiselect/pull/88)
 - Add new prop `parseLabelsAsHtml` [`#84`](https://github.com/janosh/svelte-multiselect/pull/84)
-- try fix flaky test 'multiselect &gt; can select and remove many options' [`2b0c453`](https://github.com/janosh/svelte-multiselect/commit/2b0c453c794c0b3b82e81c5b994c10bc305a98d6)
+- try fix flaky test 'multiselect >`can select and remove many options' [`2b0c453`](<https://github.com/janosh/svelte-multiselect/commit/2b0c453c794c0b3b82e81c5b994c10bc305a98d6>)
 - bump netlify node to v18, update readme + deps [`586c724`](https://github.com/janosh/svelte-multiselect/commit/586c724d471aece2b5a3726bb5eb145e36073fe3)
 - remove plausible.js analytics [`cd4c9f6`](https://github.com/janosh/svelte-multiselect/commit/cd4c9f6e18e13959dfb4fcebe9acba7a875b83a2)
 
@@ -222,7 +233,7 @@ All notable changes to this project will be documented in this file. Dates are d
 - Add `aria-label` to hidden `.form-control` input [`#62`](https://github.com/janosh/svelte-multiselect/pull/62)
 - Add `aria-label` to hidden `.form-control` input (#62) [`#58`](https://github.com/janosh/svelte-multiselect/issues/58) [`#35`](https://github.com/janosh/svelte-multiselect/issues/35)
 - fix dropdown closing when clicking between list items (closes #61) [`#61`](https://github.com/janosh/svelte-multiselect/issues/61)
-- svelte.config.js add kit.prerender.default: true, mv src/{global,app}.d.ts [`4a84913`](https://github.com/janosh/svelte-multiselect/commit/4a8491380e08bad137ca7bdda9ee4ddd38abe3d6)
+- `svelte.config.js` add `kit.prerender.default: true`, `mv src/{global,app}.d.ts` [`4a84913`](https://github.com/janosh/svelte-multiselect/commit/4a8491380e08bad137ca7bdda9ee4ddd38abe3d6)
 
 #### [v4.0.2](https://github.com/janosh/svelte-multiselect/compare/v4.0.1...v4.0.2)
 
@@ -261,7 +272,7 @@ All notable changes to this project will be documented in this file. Dates are d
 
 > 20 February 2022
 
-- by default, only show maxSelectMsg if maxSelect != null and &gt; 1 (closes #37) [`#37`](https://github.com/janosh/svelte-multiselect/issues/37)
+- by default, only show maxSelectMsg if maxSelect != null and >`1 (closes #37) [`#37`](<https://github.com/janosh/svelte-multiselect/issues/37>)
 - add CSS var --sms-options-shadow defaults to subtle black shadow around dropdown list (0 0 14pt -8pt black) (closes #36) [`#36`](https://github.com/janosh/svelte-multiselect/issues/36)
 - add prop liActiveOptionClass = '' (closes #35) [`#35`](https://github.com/janosh/svelte-multiselect/issues/35)
 - turn searchText = and showOptions = false into bindable props (closes #33) [`#33`](https://github.com/janosh/svelte-multiselect/issues/33)
@@ -293,7 +304,7 @@ All notable changes to this project will be documented in this file. Dates are d
 
 > 3 February 2022
 
-- apply id prop to &lt;input&gt; instead of outer div (closes #25) [`#25`](https://github.com/janosh/svelte-multiselect/issues/25)
+- apply id prop to `<input>` instead of outer div (closes #25) [`#25`](https://github.com/janosh/svelte-multiselect/issues/25)
 - add eslint commit hook + update deps [`6ad44b8`](https://github.com/janosh/svelte-multiselect/commit/6ad44b85057aef71eae19293de80f9d42f91f87b)
 - v.3.2.0 [`71ff2d1`](https://github.com/janosh/svelte-multiselect/commit/71ff2d192caccacbe41f83949c14d7d4ca87d590)
 - add readme badge to document minimum svelte version (for #24) [`7d9fe5a`](https://github.com/janosh/svelte-multiselect/commit/7d9fe5a977b56dab95069b64321f0718e0d61f08)
@@ -303,7 +314,7 @@ All notable changes to this project will be documented in this file. Dates are d
 > 25 January 2022
 
 - wiggle the maxSelect msg on hitting selection limit (closes #19) [`#19`](https://github.com/janosh/svelte-multiselect/issues/19)
-- readme better docs for CSS variables, rename slots {options,selected}Renderer -&gt; render{options,selected} [`c8ab724`](https://github.com/janosh/svelte-multiselect/commit/c8ab7241506cfe6b5930d098150a251e85c52afd)
+- readme better docs for CSS variables, rename slots `{options,selected}Renderer -> render{options,selected}` [`c8ab724`](https://github.com/janosh/svelte-multiselect/commit/c8ab7241506cfe6b5930d098150a251e85c52afd)
 
 #### [v3.1.0](https://github.com/janosh/svelte-multiselect/compare/v3.0.1...v3.1.0)
 
@@ -344,7 +355,7 @@ All notable changes to this project will be documented in this file. Dates are d
 
 > 27 October 2021
 
-- set &lt;input&gt; width back to 1pt as it's only needed to tab into, focus and blur &lt;MultiSelect&gt; (closes #12) [`#12`](https://github.com/janosh/svelte-multiselect/issues/12)
+- set `<input>` width back to 1pt as it's only needed to tab into, focus and blur `<MultiSelect>` (closes #12) [`#12`](https://github.com/janosh/svelte-multiselect/issues/12)
 - update readme [`45c7993`](https://github.com/janosh/svelte-multiselect/commit/45c7993398c986499d4c0729177620cbec719cb7)
 
 #### [v1.2.1](https://github.com/janosh/svelte-multiselect/compare/v1.2.0...v1.2.1)

package/package.json

@@ -5,7 +5,7 @@
   "homepage": "https://janosh.github.io/svelte-multiselect",
   "repository": "https://github.com/janosh/svelte-multiselect",
   "license": "MIT",
-  "version": "8.2.0",
+  "version": "8.2.1",
   "type": "module",
   "svelte": "index.js",
   "main": "index.js",

package/readme.md

@@ -6,7 +6,7 @@
 <h4 align="center">
 
 [![Tests](https://github.com/janosh/svelte-multiselect/actions/workflows/test.yml/badge.svg)](https://github.com/janosh/svelte-multiselect/actions/workflows/test.yml)
-[![Docs](https://github.com/janosh/svelte-multiselect/actions/workflows/docs.yml/badge.svg)](https://github.com/janosh/svelte-multiselect/actions/workflows/docs.yml)
+[![GitHub Pages](https://github.com/janosh/svelte-multiselect/actions/workflows/gh-pages.yml/badge.svg)](https://github.com/janosh/svelte-multiselect/actions/workflows/gh-pages.yml)
 [![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&logo=Svelte&label=Svelte)](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md)
 [![REPL](https://img.shields.io/badge/Svelte-REPL-blue?label=Try%20it!)](https://svelte.dev/repl/a5a14b8f15d64cb083b567292480db05)
@@ -21,7 +21,7 @@
 
 <slot name="examples" />
 
-## Features
+## 💡 &nbsp; Features
 
 - **Bindable:** `bind:selected` gives you an array of the currently selected options. Thanks to Svelte's 2-way binding, it can also control the component state externally through assignment `selected = ['foo', 42]`.
 - **Keyboard friendly** for mouse-less form completion
@@ -30,11 +30,11 @@
 - **Searchable:** start typing to filter options
 - **Tagging:** selected options are listed as tags within the input
 - **Single / multiple select:** pass `maxSelect={1, 2, 3, ...}` prop to restrict the number of selectable options
-- **Configurable:** see [props](#props)
+- **Configurable:** see props
 
 <slot name="nav" />
 
-## Recent breaking changes
+## 📜 &nbsp; Breaking changes
 
 - **6.1.0**&nbsp; 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. [PR 120](https://github.com/janosh/svelte-multiselect/pull/120).
 - **v7.0.0**&nbsp; `selected` (as well `selectedLabels` and `selectedValues`) used to be arrays always. Now, if `maxSelect=1`, they will no longer be a length-1 array but simply a single a option (label/value respectively) or `null` if no option is selected. [PR 123](https://github.com/janosh/svelte-multiselect/pull/123).
@@ -42,7 +42,7 @@
   - Props `selectedLabels` and `selectedValues` were removed. If you were using them, they were equivalent to assigning `bind:selected` to a local variable and then running `selectedLabels = selected.map(option => option.label)` and `selectedValues = selected.map(option => option.value)` if your options were objects with `label` and `value` keys. If they were simple strings/numbers, there was no point in using `selected{Labels,Values}` anyway. [PR 138](https://github.com/janosh/svelte-multiselect/pull/138)
   - Prop `noOptionsMsg` was renamed to `noMatchingOptionsMsg`. [PR 133](https://github.com/janosh/svelte-multiselect/pull/133).
 
-## Installation
+## 🔨 &nbsp; Installation
 
 ```sh
 npm install -D svelte-multiselect
@@ -50,9 +50,9 @@ pnpm add -D svelte-multiselect
 yarn add -D svelte-multiselect
 ```
 
-## Usage
+## 📙 &nbsp; Usage
 
-```html
+```svelte
 <script>
   import MultiSelect from 'svelte-multiselect'
 
@@ -61,14 +61,14 @@ yarn add -D svelte-multiselect
   let selected = []
 </script>
 
-Favorite Frontend tools?
+Favorite Frontend Tools?
 
 <code>selected = {JSON.stringify(selected)}</code>
 
 <MultiSelect bind:selected options={ui_libs} />
 ```
 
-## Props
+## 🔣 &nbsp; Props
 
 Full list of props/bindable variables for this component. The `Option` type you see below is defined in [`src/lib/index.ts`](https://github.com/janosh/svelte-multiselect/blob/main/src/lib/index.ts) and can be imported as `import { type Option } from 'svelte-multiselect'`.
 
@@ -344,7 +344,7 @@ Full list of props/bindable variables for this component. The `Option` type you
 
    If `maxSelect={1}`, `value` will be the single item in `selected` (or `null` if `selected` is empty). If `maxSelect != 1`, `maxSelect` and `selected` are equal. Warning: `value` supports 1-way binding only, meaning `bind:value` will update `value` when internal component state changes but changing `value` externally will not update internal component state. This is because `value` is already reactive to `selected` and making `selected` reactive to `value` would be cyclic. Suggestions for better solutions that solve both [#86](https://github.com/janosh/svelte-multiselect/issues/86) and [#136](https://github.com/janosh/svelte-multiselect/issues/136) welcome!
 
-## Slots
+## 🎰 &nbsp; Slots
 
 `MultiSelect.svelte` has 3 named slots:
 
@@ -356,7 +356,7 @@ Full list of props/bindable variables for this component. The `Option` type you
 
 Example:
 
-```html
+```svelte
 <MultiSelect options={[`Red`, `Green`, `Blue`, `Yellow`, `Purple`]}>
   <span let:idx let:option slot="option">
     {idx + 1}
@@ -375,7 +375,7 @@ Example:
 </MultiSelect>
 ```
 
-## Events
+## 🎬 &nbsp; Events
 
 `MultiSelect.svelte` dispatches the following events:
 
@@ -417,7 +417,7 @@ Example:
 
 For example, here's how you might annoy your users with an alert every time one or more options are added or removed:
 
-```html
+```svelte
 <MultiSelect
   on:change={(e) => {
     if (e.detail.type === 'add') alert(`You added ${e.detail.option}`)
@@ -431,18 +431,18 @@ For example, here's how you might annoy your users with an alert every time one
 
 The above list of events are [Svelte `dispatch` events](https://svelte.dev/tutorial/component-events). This component also forwards many DOM events from the `<input>` node: `blur`, `change`, `click`, `keydown`, `keyup`, `mousedown`, `mouseenter`, `mouseleave`, `touchcancel`, `touchend`, `touchmove`, `touchstart`. Registering listeners for these events works the same:
 
-```html
+```svelte
 <MultiSelect
   options={[1, 2, 3]}
   on:keyup={(event) => console.log('key', event.target.value)}
 />
 ```
 
-## TypeScript
+## 🦺 &nbsp; TypeScript
 
 TypeScript users can import the types used for internal type safety:
 
-```html
+```svelte
 <script lang="ts">
   import MultiSelect from 'svelte-multiselect'
   import type { Option, ObjectOption } from 'svelte-multiselect'
@@ -456,11 +456,11 @@ TypeScript users can import the types used for internal type safety:
 </script>
 ```
 
-## Styling
+## ✨ &nbsp; Styling
 
 There are 3 ways to style this component. To understand which options do what, it helps to keep in mind this simplified DOM structure of the component:
 
-```html
+```svelte
 <div class="multiselect">
   <ul class="selected">
     <li>Selected 1</li>
@@ -522,7 +522,7 @@ If you only want to make small adjustments, you can pass the following CSS varia
 
 For example, to change the background color of the options dropdown:
 
-```html
+```svelte
 <MultiSelect --sms-options-bg="white" />
 ```
 
@@ -540,7 +540,7 @@ The second method allows you to pass in custom classes to the important DOM elem
 
 This simplified version of the DOM structure of the component shows where these classes are inserted:
 
-```html
+```svelte
 <div class="multiselect {outerDivClass}">
   <input class={inputClass} />
   <ul class="selected {ulSelectedClass}">
@@ -559,7 +559,7 @@ This simplified version of the DOM structure of the component shows where these
 
 ### With global CSS
 
-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).
+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) {
@@ -607,6 +607,10 @@ Odd as it may seem, you get the most fine-grained control over the styling of ev
 }
 ```
 
-## Want to contribute to this project?
+## 🆕 &nbsp; Changelog
 
-[Here are some steps](https://github.com/janosh/svelte-multiselect/blob/main/contributing.md) to get you started!
+[View the changelog](changelog.md).
+
+## 🙏 &nbsp; Contributing
+
+Here are some steps to [get you started](contributing.md) if you'd like to contribute to this project!