From 576dedb9c38a68585218e549c4b8654c268a8d9c Mon Sep 17 00:00:00 2001
From: Eric Y Liu <ericyl.us@gmail.com>
Date: Sat, 13 Mar 2021 06:06:31 -0800
Subject: [PATCH] feat: forward restProps to input element

---
 docs/src/COMPONENT_API.json               | 10 +++++-----
 docs/src/pages/components/MultiSelect.svx | 16 ++++++++++------
 src/ComboBox/ComboBox.svelte              | 11 ++++++-----
 src/DatePicker/DatePickerInput.svelte     |  4 ++--
 src/MultiSelect/MultiSelect.svelte        |  2 +-
 src/NumberInput/NumberInput.svelte        | 19 ++++++++++---------
 src/Search/Search.svelte                  |  3 +--
 src/TimePicker/TimePicker.svelte          |  2 +-
 tests/TimePicker.test.svelte              |  2 +-
 types/ComboBox/ComboBox.d.ts              |  2 +-
 types/DatePicker/DatePickerInput.d.ts     |  2 +-
 types/MultiSelect/MultiSelect.d.ts        |  2 +-
 types/NumberInput/NumberInput.d.ts        |  2 +-
 types/TimePicker/TimePicker.d.ts          |  2 +-
 14 files changed, 42 insertions(+), 37 deletions(-)

diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 3ea015e6..36a178e9 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -1397,7 +1397,7 @@
           "ts": "interface ComboBoxItem { id: string; text: string; }"
         }
       ],
-      "rest_props": { "type": "Element", "name": "div" }
+      "rest_props": { "type": "Element", "name": "input" }
     },
     {
       "moduleName": "ComposedModal",
@@ -2249,7 +2249,7 @@
         { "type": "forwarded", "name": "blur", "element": "input" }
       ],
       "typedefs": [],
-      "rest_props": { "type": "Element", "name": "div" }
+      "rest_props": { "type": "Element", "name": "input" }
     },
     {
       "moduleName": "DatePickerSkeleton",
@@ -5430,7 +5430,7 @@
           "ts": "interface MultiSelectItem { id: MultiSelectItemId; text: MultiSelectItemText; }"
         }
       ],
-      "rest_props": { "type": "Element", "name": "div" }
+      "rest_props": { "type": "Element", "name": "input" }
     },
     {
       "moduleName": "NotificationActionButton",
@@ -5841,7 +5841,7 @@
           "ts": "type NumberInputTranslationId = \"increment\" | \"decrement\""
         }
       ],
-      "rest_props": { "type": "Element", "name": "div" }
+      "rest_props": { "type": "Element", "name": "input" }
     },
     {
       "moduleName": "NumberInputSkeleton",
@@ -9797,7 +9797,7 @@
         { "type": "forwarded", "name": "blur", "element": "input" }
       ],
       "typedefs": [],
-      "rest_props": { "type": "Element", "name": "div" }
+      "rest_props": { "type": "Element", "name": "input" }
     },
     {
       "moduleName": "TimePickerSelect",
diff --git a/docs/src/pages/components/MultiSelect.svx b/docs/src/pages/components/MultiSelect.svx
index 3ac22723..018bd30f 100644
--- a/docs/src/pages/components/MultiSelect.svx
+++ b/docs/src/pages/components/MultiSelect.svx
@@ -24,6 +24,16 @@ To prevent alphabetical item ordering, pass an empty function to the `sortItem`
     sortItem="{() => {}}"
   />
 
+### Filterable
+
+`$$restProps` are spread to the underlying input element.
+
+<MultiSelect spellcheck="false" filterable titleText="Contact" placeholder="Filter contact methods..."
+    items="{[{id: "0", text: "Slack"},
+    {id: "1", text: "Email"},
+    {id: "2", text: "Fax"}]}"
+  />
+
 ### Initial selected items
 
 To select (or bind) items, pass an array of item ids to `selectedIds`.
@@ -93,13 +103,7 @@ Set `direction` to `"top"` for the dropdown menu to appear above the input.
     {id: "2", text: "Fax"}]}"
   />
 
-### Filterable
 
-<MultiSelect filterable titleText="Contact" placeholder="Filter contact methods..."
-    items="{[{id: "0", text: "Slack"},
-    {id: "1", text: "Email"},
-    {id: "2", text: "Fax"}]}"
-  />
 
 ### Invalid state
 
diff --git a/src/ComboBox/ComboBox.svelte b/src/ComboBox/ComboBox.svelte
index 69b42adb..da93611f 100644
--- a/src/ComboBox/ComboBox.svelte
+++ b/src/ComboBox/ComboBox.svelte
@@ -160,7 +160,7 @@
     }
   }}" />
 
-<div class:bx--list-box__wrapper="{true}" {...$$restProps}>
+<div class:bx--list-box__wrapper="{true}">
   {#if titleText}
     <label
       for="{id}"
@@ -209,6 +209,11 @@
         aria-disabled="{disabled}"
         aria-controls="{open ? menuId : undefined}"
         aria-owns="{open ? menuId : undefined}"
+        disabled="{disabled}"
+        placeholder="{placeholder}"
+        id="{id}"
+        value="{inputValue}"
+        {...$$restProps}
         class:bx--text-input="{true}"
         class:bx--text-input--light="{light}"
         class:bx--text-input--empty="{inputValue === ''}"
@@ -246,10 +251,6 @@
             ref.focus();
           }
         }}"
-        disabled="{disabled}"
-        placeholder="{placeholder}"
-        id="{id}"
-        value="{inputValue}"
       />
       {#if invalid}
         <WarningFilled16 class="bx--list-box__invalid-icon" />
diff --git a/src/DatePicker/DatePickerInput.svelte b/src/DatePicker/DatePickerInput.svelte
index b71e2d86..162e1443 100644
--- a/src/DatePicker/DatePickerInput.svelte
+++ b/src/DatePicker/DatePickerInput.svelte
@@ -77,7 +77,6 @@
 <div
   class:bx--date-picker-container="{true}"
   class:bx--date-picker--nolabel="{!labelText}"
-  {...$$restProps}
 >
   {#if labelText}
     <label
@@ -97,13 +96,14 @@
     <input
       bind:this="{ref}"
       data-invalid="{invalid || undefined}"
-      value="{!$range ? $inputValue : undefined}"
       id="{id}"
       name="{name}"
       placeholder="{placeholder}"
       type="{type}"
       pattern="{pattern}"
       disabled="{disabled}"
+      {...$$restProps}
+      value="{!$range ? $inputValue : undefined}"
       class:bx--date-picker__input="{true}"
       class:bx--date-picker__input--invalid="{invalid}"
       class="{size && `bx--date-picker__input--${size}`}"
diff --git a/src/MultiSelect/MultiSelect.svelte b/src/MultiSelect/MultiSelect.svelte
index 01a8edb1..ea6e2c28 100644
--- a/src/MultiSelect/MultiSelect.svelte
+++ b/src/MultiSelect/MultiSelect.svelte
@@ -237,7 +237,6 @@
   class:bx--multi-select__wrapper--inline="{inline}"
   class:bx--list-box__wrapper--inline="{inline}"
   class:bx--multi-select__wrapper--inline--invalid="{inline && invalid}"
-  {...$$restProps}
 >
   {#if titleText}
     <label
@@ -348,6 +347,7 @@
       {#if filterable}
         <input
           bind:this="{inputRef}"
+          {...$$restProps}
           role="combobox"
           tabindex="0"
           autocomplete="off"
diff --git a/src/NumberInput/NumberInput.svelte b/src/NumberInput/NumberInput.svelte
index 856c1b5c..34b51761 100644
--- a/src/NumberInput/NumberInput.svelte
+++ b/src/NumberInput/NumberInput.svelte
@@ -144,7 +144,6 @@
 
 <div
   class:bx--form-item="{true}"
-  {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
@@ -195,10 +194,6 @@
           type="number"
           pattern="[0-9]*"
           aria-label="{label ? undefined : ariaLabel}"
-          on:input
-          on:input="{({ target }) => {
-            inputValue = target.value;
-          }}"
           disabled="{disabled}"
           id="{id}"
           name="{name}"
@@ -207,6 +202,11 @@
           step="{step}"
           value="{value}"
           readonly="{readonly}"
+          {...$$restProps}
+          on:input
+          on:input="{({ target }) => {
+            inputValue = target.value;
+          }}"
         />
         <button
           type="button"
@@ -247,10 +247,6 @@
           data-invalid="{invalid || undefined}"
           aria-invalid="{invalid || undefined}"
           aria-label="{label ? undefined : ariaLabel}"
-          on:input
-          on:input="{({ target }) => {
-            inputValue = target.value;
-          }}"
           disabled="{disabled}"
           id="{id}"
           max="{max}"
@@ -258,6 +254,11 @@
           step="{step}"
           value="{value}"
           readonly="{readonly}"
+          {...$$restProps}
+          on:input
+          on:input="{({ target }) => {
+            inputValue = target.value;
+          }}"
         />
         {#if invalid}
           <WarningFilled16 class="bx--number__invalid" />
diff --git a/src/Search/Search.svelte b/src/Search/Search.svelte
index a2b3932d..6cfd0568 100644
--- a/src/Search/Search.svelte
+++ b/src/Search/Search.svelte
@@ -98,7 +98,6 @@
     class:bx--search--sm="{size === 'sm' || small}"
     class:bx--search--lg="{size === 'lg'}"
     class:bx--search--xl="{size === 'xl'}"
-    {...$$restProps}
   >
     <Search16 class="bx--search-magnifier" />
     <label id="{id}-search" for="{id}" class:bx--label="{true}"
@@ -116,7 +115,7 @@
       placeholder="{placeholder}"
       type="{type}"
       value="{value}"
-      aria-hidden="{$$props['aria-hidden']}"
+      {...$$restProps}
       on:change
       on:input
       on:input="{({ target }) => {
diff --git a/src/TimePicker/TimePicker.svelte b/src/TimePicker/TimePicker.svelte
index 4e7dfcc3..bdac8fae 100644
--- a/src/TimePicker/TimePicker.svelte
+++ b/src/TimePicker/TimePicker.svelte
@@ -59,7 +59,6 @@
 
 <div
   class:bx--form-item="{true}"
-  {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
@@ -94,6 +93,7 @@
         type="{type}"
         value="{value}"
         disabled="{disabled}"
+        {...$$restProps}
         class:bx--time-picker__input-field="{true}"
         class:bx--text-input="{true}"
         class:bx--text-input--light="{light}"
diff --git a/tests/TimePicker.test.svelte b/tests/TimePicker.test.svelte
index 2bbe3ec9..2deea0dc 100644
--- a/tests/TimePicker.test.svelte
+++ b/tests/TimePicker.test.svelte
@@ -2,7 +2,7 @@
   import { TimePicker, TimePickerSelect, SelectItem } from "../types";
 </script>
 
-<TimePicker labelText="Cron job" placeholder="hh:mm">
+<TimePicker spellcheck="false" labelText="Cron job" placeholder="hh:mm">
   <TimePickerSelect value="PM">
     <SelectItem value="am" text="AM" />
     <SelectItem value="pm" text="PM" />
diff --git a/types/ComboBox/ComboBox.d.ts b/types/ComboBox/ComboBox.d.ts
index af7529b7..72e0abf8 100644
--- a/types/ComboBox/ComboBox.d.ts
+++ b/types/ComboBox/ComboBox.d.ts
@@ -7,7 +7,7 @@ export interface ComboBoxItem {
 }
 
 export interface ComboBoxProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> {
   /**
    * Set the combobox items
    * @default []
diff --git a/types/DatePicker/DatePickerInput.d.ts b/types/DatePicker/DatePickerInput.d.ts
index 7a3c59a6..1a6c24d1 100644
--- a/types/DatePicker/DatePickerInput.d.ts
+++ b/types/DatePicker/DatePickerInput.d.ts
@@ -2,7 +2,7 @@
 import { SvelteComponentTyped } from "svelte";
 
 export interface DatePickerInputProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> {
   /**
    * Set the size of the input
    */
diff --git a/types/MultiSelect/MultiSelect.d.ts b/types/MultiSelect/MultiSelect.d.ts
index 03d12188..872702d8 100644
--- a/types/MultiSelect/MultiSelect.d.ts
+++ b/types/MultiSelect/MultiSelect.d.ts
@@ -11,7 +11,7 @@ export interface MultiSelectItem {
 }
 
 export interface MultiSelectProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> {
   /**
    * Set the multiselect items
    * @default []
diff --git a/types/NumberInput/NumberInput.d.ts b/types/NumberInput/NumberInput.d.ts
index 62e6096a..cb227327 100644
--- a/types/NumberInput/NumberInput.d.ts
+++ b/types/NumberInput/NumberInput.d.ts
@@ -4,7 +4,7 @@ import { SvelteComponentTyped } from "svelte";
 export type NumberInputTranslationId = "increment" | "decrement";
 
 export interface NumberInputProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> {
   /**
    * Set the size of the input
    */
diff --git a/types/TimePicker/TimePicker.d.ts b/types/TimePicker/TimePicker.d.ts
index efe379a9..524f480a 100644
--- a/types/TimePicker/TimePicker.d.ts
+++ b/types/TimePicker/TimePicker.d.ts
@@ -2,7 +2,7 @@
 import { SvelteComponentTyped } from "svelte";
 
 export interface TimePickerProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> {
   /**
    * Specify the size of the input
    */