diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4655f8e43..7dd30c49e 100644
--- 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
index 358676fec..ac1fca084 100644
--- 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 (
+
+
+ Trigger
+
+ Option A
+ Option B
+ Option C
+
+
+ )
+ }
+
+ render()
+
+ 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
index 84e3f796a..b3a22edc5 100644
--- 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
) {
- 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
index d0e5c9330..447fe216b 100644
--- 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`
+
+
+ Trigger
+
+ Option A
+ Option B
+ Option C
+
+
+ `,
+ 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
index c60112427..ca5854fc6 100644
--- 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,
}