Props to manipulating inputmode and pattern attributes (#116)

* feat: add `inputmode` and `pattern` props

This allows manipulating keyboard type on mobiles

* docs: add `inputmode` and `pattern` references

* add tests for props pattern and inputmode

* tweak readme doc strings for inputmode and pattern props

Co-authored-by: Janosh Riebesell <[email protected]>

Author: oskar-gmerek

readme.md

@@ -8,7 +8,7 @@
 [![Tests](https://github.com/janosh/svelte-multiselect/actions/workflows/test.yml/badge.svg)](https://github.com/janosh/svelte-multiselect/actions/workflows/test.yml)
 [![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&logo=v)](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md)
+[![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?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)
 
@@ -287,6 +287,18 @@ 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
+   inputmode: string = ``
+   ```
+
+   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
 
 `MultiSelect.svelte` has 3 named slots:

src/lib/MultiSelect.svelte

@@ -51,6 +51,8 @@
   export let sortSelected: boolean | ((op1: Option, op2: Option) => number) = false
   export let ulOptionsClass: string = ``
   export let ulSelectedClass: string = ``
+  export let inputmode: string = ``
+  export let pattern: string = ``
 
   type $$Events = MultiSelectEvents // for type-safe event listening on this component
 
@@ -345,6 +347,8 @@
         {id}
         {name}
         {disabled}
+        {inputmode}
+        {pattern}
         placeholder={selectedLabels.length ? `` : placeholder}
         aria-invalid={invalid ? `true` : null}
       />

tests/multiselect.test.ts

@@ -253,6 +253,7 @@ test.describe(`multiselect`, async () => {
     }
   })
 
+  // https://github.com/janosh/svelte-multiselect/issues/111
   test(`loops through dropdown list with arrow keys making each option active in turn`, async ({
     page,
   }) => {

tests/unit/multiselect.test.ts

@@ -62,17 +62,28 @@ describe(`MultiSelect`, () => {
     )
   })
 
-  test(`applies id, value, autocomplete, name, placeholder to input`, () => {
+  test(`applies DOM attributes to input node`, () => {
     const options = [1, 2, 3]
     const searchText = `1`
     const id = `fancy-id`
     const autocomplete = `on`
     const name = `fancy-name`
     const placeholder = `fancy placeholder`
+    const inputmode = `tel`
+    const pattern = `(reg)[ex]`
 
     new MultiSelect({
       target: document.body,
-      props: { options, searchText, id, autocomplete, placeholder, name },
+      props: {
+        options,
+        searchText,
+        id,
+        autocomplete,
+        placeholder,
+        name,
+        inputmode,
+        pattern,
+      },
     })
 
     const lis = document.querySelectorAll(`div.multiselect > ul.options > li`)
@@ -88,6 +99,8 @@ describe(`MultiSelect`, () => {
     expect(input?.autocomplete).toBe(autocomplete)
     expect(input?.placeholder).toBe(placeholder)
     expect(input?.name).toBe(name)
+    expect(input?.inputMode).toBe(inputmode)
+    expect(input?.pattern).toBe(pattern)
   })
 
   test(`applies custom classes for styling through CSS frameworks`, () => {
@@ -120,8 +133,9 @@ describe(`MultiSelect`, () => {
     }
   })
 
+  // https://github.com/janosh/svelte-multiselect/issues/111
   test(`arrow down makes first option active`, async () => {
-    const options = [1, 2, 3]
+    const options = [`1`, `2`, `3`]
 
     new MultiSelect({ target: document.body, props: { options, open: true } })
 
@@ -139,6 +153,7 @@ describe(`MultiSelect`, () => {
     expect(active_option?.textContent?.trim()).toBe(`1`)
   })
 
+  // https://github.com/janosh/svelte-multiselect/issues/112
   test(`can select 1st and last option with arrow and enter key`, async () => {
     const options = [1, 2, 3]