New prop resetFilterOnAdd (#137)

* clean up {Repo,Color}Slot.svelte

* unskip test parseLabelsAsHtml+allowUserOptions gives errors

* set playwright test mode to parallel

now uses 5 instead of 1 workers

* add IconifySlot.svelte used in Examples.svelte with new octicon options, pnpm add -D @iconify/svelte

* refactor maxSelectMsg prop and invalid reset handling when new selected options change

* assert aria-invalid attribute is removed on selecting a new option

in div has 'invalid' class and input is aria-invalid when invalid=true

* add prop resetFilterOnAdd

Whether text entered into the input to filter options in the dropdown list is reset to empty string when user selects an option.

* add test 'resetFilterOnAdd handles input value correctly after adding an option'

Author: janosh

package.json

@@ -20,6 +20,7 @@
     "test": "vitest --run tests/unit/*.ts && playwright test tests/*.test.ts"
   },
   "devDependencies": {
+    "@iconify/svelte": "^3.0.0",
     "@playwright/test": "^1.27.1",
     "@sveltejs/adapter-static": "^1.0.0-next.44",
     "@sveltejs/kit": "^1.0.0-next.516",

pnpm-lock.yaml

@@ -217,7 +217,10 @@ import type { Option } from 'svelte-multiselect'
    Positive integer to limit the number of options users can pick. `null` means no limit. `maxSelect={1}` will change the type of `selected` to be a single `Option` (or `null`) (not a length-1 array). Likewise, the type of `selectedLabels` changes from `(string | number)[]` to `string | number | null` and `selectedValues` from `unknown[]` to `unknown | null`. `maxSelect={1}` will also give `div.multiselect` a class of `single`. I.e. you can target the selector `div.multiselect.single` to give single selects a different appearance from multi selects.
 
 1. ```ts
-   maxSelectMsg: ((current: number, max: number) => string) | null = null
+   maxSelectMsg: ((current: number, max: number) => string) | null = (
+    current: number,
+    max: number
+  ) => (max > 1 ? `${current}/${max}` : ``)
    ```
 
    Inform users how many of the maximum allowed options they have already selected. Set `maxSelectMsg={null}` to not show a message. Defaults to `null` when `maxSelect={1}` or `maxSelect={null}`. Else if `maxSelect > 1`, defaults to:
@@ -292,6 +295,12 @@ import type { Option } from 'svelte-multiselect'
 
    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.
 
+1. ```ts
+   resetFilterOnAdd: boolean = true
+   ```
+
+   Whether text entered into the input to filter options in the dropdown list is reset to empty string when user selects an option.
+
 1. ```ts
    searchText: string = ``
    ```

readme.md

@@ -117,3 +117,6 @@ blockquote p:last-child {
 blockquote p:first-child {
   margin-top: 0;
 }
+div.multiselect.invalid {
+  border: 1px solid red !important;
+}

src/app.css

@@ -1,32 +1,23 @@
 <script lang="ts">
-  import type { ObjectOption } from '$lib'
-
-  export let option: ObjectOption
+  export let option: string
   export let idx: number
 </script>
 
-<span>
-  <small>{idx + 1}</small>
-  <span style:background={option.label} />
-  {option.label}
-</span>
+<div>
+  {idx + 1}
+  <span style:background={option} />
+  {option}
+</div>
 
 <style>
-  span {
+  div {
     display: flex;
     place-items: center;
-    gap: 3pt;
-  }
-  span small {
-    width: 10pt;
-    text-align: right;
+    gap: 5pt;
   }
-  span > span {
+  div > span {
     width: 1em;
     height: 1em;
-    display: inline-block;
     border-radius: 2pt;
-    margin: 0 5pt;
-    vertical-align: middle;
   }
 </style>

src/components/ColorSlot.svelte

@@ -1,19 +1,20 @@
 <script lang="ts">
   import type { ObjectOption } from '$lib'
   import MultiSelect from '$lib'
-  import { colors, frontend_libs, languages, ml_libs } from '../options'
+  import { colors, frontend_libs, languages, ml_libs, octicons } from '../options'
   import { language_store } from '../stores'
   import ColorSlot from './ColorSlot.svelte'
   import Confetti from './Confetti.svelte'
+  import IconifySlotSlot from './IconifySlot.svelte'
   import LanguageSlot from './LanguageSlot.svelte'
   import RepoSlot from './RepoSlot.svelte'
 
   let selected_ml: string[]
-  let selected_colors: ObjectOption[]
+  let selected_colors = [`red`, `orange`, `yellow`]
 
   let showConfetti = false
 
-  const filterFunc = (op: ObjectOption, searchText: string) => {
+  const frontend_libs_filter_func = (op: ObjectOption, searchText: string) => {
     if (!searchText) return true
     const [label, lang, searchStr] = [op.label, op.lang, searchText].map((s) =>
       `${s}`.toLowerCase()
@@ -50,10 +51,12 @@
 <section>
   <h3>Single Select</h3>
 
-  <label for="fav-ml-tool">with loading indicator on text input</label>
+  <p>with loading indicator on text input</p>
 
   <pre>selected = {JSON.stringify(selected_ml)}</pre>
 
+  <label for="fav-ml-tool">Favorite machine learning framework?</label>
+
   <MultiSelect
     id="fav-ml-tool"
     maxSelect={1}
@@ -76,7 +79,7 @@
     options={frontend_libs}
     maxSelect={4}
     placeholder="Favorite web framework?"
-    {filterFunc}
+    filterFunc={frontend_libs_filter_func}
     on:add={(e) => {
       if (e.detail.option.label === `Svelte`) {
         showConfetti = true
@@ -100,7 +103,7 @@
   </label>
   <form
     on:submit|preventDefault={() => {
-      alert(`You selected '${selected_colors.map((el) => el.label).join(`, `)}'`)
+      alert(`You selected '${selected_colors.join(`, `)}'`)
     }}
   >
     <MultiSelect
@@ -126,12 +129,36 @@
   </form>
 </section>
 
+<section>
+  <h3>Very long Multi Select</h3>
+
+  <label for="octicons">List of GitHub's Octicons</label>
+
+  <MultiSelect
+    id="octicons"
+    options={octicons}
+    placeholder="Take your pick..."
+    maxSelect={20}
+    maxSelectMsg={(current, max) =>
+      current == max ? `Hold your horses!` : `${current} of ${max}`}
+  >
+    <IconifySlotSlot let:option {option} slot="selected" />
+    <IconifySlotSlot let:option {option} slot="option" />
+  </MultiSelect>
+</section>
+
 <style>
   section {
     margin-top: 2em;
     background-color: #28154b;
-    border-radius: 1ex;
-    padding: 1pt 1.4ex;
+    border-radius: 4pt;
+    padding: 1pt 10pt;
+  }
+  section h3 {
+    margin: 5pt 0 10pt;
+  }
+  section p {
+    margin: 5pt 0;
   }
   pre {
     white-space: pre-wrap;

src/components/Examples.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import Icon from '@iconify/svelte'
+
+  export let option: string
+  export let pack = `octicon`
+  export let gap = `9pt`
+</script>
+
+<span style:gap>
+  <Icon icon="{pack}:{option}" inline />
+  {option.replaceAll(`-`, ` `)}
+</span>
+
+<style>
+  span {
+    display: flex;
+    align-items: center;
+    text-transform: capitalize;
+  }
+</style>

src/components/IconifySlot.svelte

@@ -7,14 +7,14 @@
 </script>
 
 <span>
-  <small>{idx + 1}</small>
+  {idx + 1}
   <strong>{option.label}</strong>
   <small>
     <a
+      on:click|stopPropagation
       href="https://github.com/{option.repo_handle}"
       target="_blank"
       rel="noreferrer"
-      on:click|stopPropagation
     >
       <Octocat width="14pt" />{option.repo_handle}
     </a>
@@ -27,15 +27,9 @@
     place-items: center;
     gap: 10pt;
   }
-  span small:first-child {
-    width: 6pt;
-    text-align: right;
-  }
   a {
     display: flex;
     gap: 3pt;
-    font-style: normal;
     font-weight: lighter;
-    place-items: center;
   }
 </style>

src/components/RepoSlot.svelte

@@ -36,7 +36,10 @@
   export let loading: boolean = false
   export let matchingOptions: Option[] = []
   export let maxSelect: number | null = null // null means any number of options are selectable
-  export let maxSelectMsg: ((current: number, max: number) => string) | null = null
+  export let maxSelectMsg: ((current: number, max: number) => string) | null = (
+    current: number,
+    max: number
+  ) => (max > 1 ? `${current}/${max}` : ``)
   export let name: string | null = null
   export let noMatchingOptionsMsg: string = `No matching options`
   export let open: boolean = false
@@ -49,6 +52,7 @@
   export let removeAllTitle: string = `Remove all`
   export let removeBtnTitle: string = `Remove`
   export let required: boolean = false
+  export let resetFilterOnAdd: boolean = true
   export let searchText: string = ``
   export let selected: Option[] | Option | null =
     options
@@ -106,11 +110,6 @@
   let add_option_msg_is_active: boolean = false // controls active state of <li>{addOptionMsg}</li>
   let window_width: number
 
-  // formValue binds to input.form-control to prevent form submission if required
-  // prop is true and no options are selected
-  $: form_value = _selectedValues.join(`,`)
-  $: if (form_value) invalid = false // reset error status whenever component state changes
-
   // options matching the current search text
   $: matchingOptions = options.filter(
     (op) => filterFunc(op, searchText) && !_selectedLabels.includes(get_label(op)) // remove already selected options from dropdown list
@@ -161,7 +160,7 @@
       if (option === undefined) {
         throw `Run time error, option with label ${label} not found in options list`
       }
-      searchText = `` // reset search string on selection
+      if (resetFilterOnAdd) searchText = `` // reset search string on selection
       if ([``, undefined, null].includes(option)) {
         console.error(
           `MultiSelect: encountered missing option with label ${label} (or option is poorly labeled)`
@@ -192,6 +191,8 @@
       }
       dispatch(`add`, { option })
       dispatch(`change`, { option, type: `add` })
+
+      invalid = false // reset error status whenever new items are selected
     }
   }
 
@@ -215,6 +216,7 @@
 
     dispatch(`remove`, { option })
     dispatch(`change`, { option, type: `remove` })
+    invalid = false // reset error status whenever items are removed
   }
 
   function open_dropdown(event: Event) {
@@ -338,10 +340,10 @@
   title={disabled ? disabledInputTitle : null}
   aria-disabled={disabled ? `true` : null}
 >
-  <!-- formValue binds to input.form-control to prevent form submission if required prop is true and no options are selected -->
+  <!-- bind:value={_selected} prevents form submission if required prop is true and no options are selected -->
   <input
     {required}
-    bind:value={form_value}
+    bind:value={_selected}
     tabindex="-1"
     aria-hidden="true"
     aria-label="ignore this, used only to prevent form submission if select is required but empty"
@@ -419,8 +421,7 @@
     {#if maxSelect && (maxSelect > 1 || maxSelectMsg)}
       <Wiggle bind:wiggle angle={20}>
         <span style="padding: 0 3pt;">
-          {maxSelectMsg?.(_selected.length, maxSelect) ??
-            (maxSelect > 1 ? `${_selected.length}/${maxSelect}` : ``)}
+          {maxSelectMsg?.(_selected.length, maxSelect)}
         </span>
       </Wiggle>
     {/if}
@@ -454,7 +455,7 @@
         <li
           on:mousedown|stopPropagation
           on:mouseup|stopPropagation={(event) => {
-            if (!disabled) is_selected(label) ? remove(label) : add(label, event)
+            if (!disabled) add(label, event)
           }}
           title={disabled
             ? disabledTitle