Allow to override the type on the Combobox.Input (#1476)

* allow to override the `type` on the `Combobox.Input` This still defaults to `text`. * update changelog
tailwindlabs · May 19, 2022 · 9280d92 · 9280d92
1 parent 5f42488
commit 9280d92
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,11 +7,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased - @headlessui/vue]
 
-- Nothing yet!
+### Fixed
+
+- Allow to override the `type` on the `ComboboxInput` ([#1476](https://github.com/tailwindlabs/headlessui/pull/1476))
 
 ## [Unreleased - @headlessui/react]
 
-- Nothing yet!
+### Fixed
+
+- Allow to override the `type` on the `Combobox.Input` ([#1476](https://github.com/tailwindlabs/headlessui/pull/1476))
 
 ## [@headlessui/vue@v1.6.2] - 2022-05-19
 

diff --git a/packages/@headlessui-react/src/components/combobox/combobox.test.tsx b/packages/@headlessui-react/src/components/combobox/combobox.test.tsx
@@ -237,6 +237,31 @@ describe('Rendering', () => {
         expect(getComboboxInput()).toHaveValue('B')
       })
     )
+
+    it(
+      'should be possible to override the `type` on the input',
+      suppressConsoleLogs(async () => {
+        function Example() {
+          let [value, setValue] = useState(undefined)
+
+          return (
+            <Combobox value={value} onChange={setValue}>
+              <Combobox.Input type="search" onChange={NOOP} />
+              <Combobox.Button>Trigger</Combobox.Button>
+              <Combobox.Options>
+                <Combobox.Option value="a">Option A</Combobox.Option>
+                <Combobox.Option value="b">Option B</Combobox.Option>
+                <Combobox.Option value="c">Option C</Combobox.Option>
+              </Combobox.Options>
+            </Combobox>
+          )
+        }
+
+        render(<Example />)
+
+        expect(getComboboxInput()).toHaveAttribute('type', 'search')
+      })
+    )
   })
 
   describe('Combobox.Label', () => {

diff --git a/packages/@headlessui-react/src/components/combobox/combobox.tsx b/packages/@headlessui-react/src/components/combobox/combobox.tsx
@@ -602,7 +602,6 @@ interface InputRenderPropArg {
 type InputPropsWeControl =
   | 'id'
   | 'role'
-  | 'type'
   | 'aria-labelledby'
   | 'aria-expanded'
   | 'aria-activedescendant'
@@ -622,7 +621,7 @@ let Input = forwardRefWithAs(function Input<
   },
   ref: Ref<HTMLInputElement>
 ) {
-  let { value, onChange, displayValue, ...theirProps } = props
+  let { value, onChange, displayValue, type = 'text', ...theirProps } = props
   let [state] = useComboboxContext('Combobox.Input')
   let data = useComboboxData()
   let actions = useComboboxActions()
@@ -771,7 +770,7 @@ let Input = forwardRefWithAs(function Input<
     ref: inputRef,
     id,
     role: 'combobox',
-    type: 'text',
+    type,
     'aria-controls': state.optionsRef.current?.id,
     'aria-expanded': state.disabled ? undefined : state.comboboxState === ComboboxStates.Open,
     'aria-activedescendant':

diff --git a/packages/@headlessui-vue/src/components/combobox/combobox.test.ts b/packages/@headlessui-vue/src/components/combobox/combobox.test.ts
@@ -288,6 +288,30 @@ describe('Rendering', () => {
         expect(getComboboxInput()).toHaveValue('B')
       })
     )
+
+    it(
+      'should be possible to override the `type` on the input',
+      suppressConsoleLogs(async () => {
+        let Example = defineComponent({
+          template: html`
+            <Combobox v-model="value">
+              <ComboboxInput type="search" />
+              <ComboboxButton>Trigger</ComboboxButton>
+              <ComboboxOptions>
+                <ComboboxOption value="a">Option A</ComboboxOption>
+                <ComboboxOption value="b">Option B</ComboboxOption>
+                <ComboboxOption value="c">Option C</ComboboxOption>
+              </ComboboxOptions>
+            </Combobox>
+          `,
+          setup: () => ({ value: ref(null) }),
+        })
+
+        renderTemplate(Example)
+
+        expect(getComboboxInput()).toHaveAttribute('type', 'search')
+      })
+    )
   })
 
   describe('ComboboxLabel', () => {

diff --git a/packages/@headlessui-vue/src/components/combobox/combobox.ts b/packages/@headlessui-vue/src/components/combobox/combobox.ts
@@ -746,7 +746,7 @@ export let ComboboxInput = defineComponent({
         onChange: handleChange,
         onInput: handleInput,
         role: 'combobox',
-        type: 'text',
+        type: attrs.type ?? 'text',
         tabIndex: 0,
         ref: api.inputRef,
       }