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, }