diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md index 08ddd19..55e8fc2 100644 --- a/packages/@headlessui-react/CHANGELOG.md +++ b/packages/@headlessui-react/CHANGELOG.md @@ -15,8 +15,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed - Use correct `ownerDocument` when using internal `Portal` component ([#3594](https://github.com/tailwindlabs/headlessui/pull/3594)) -- Bump `@tanstack/react-virtual` to be fix warnings in React 19 projects ([#3588](https://github.com/tailwindlabs/headlessui/pull/3588)) +- Bump `@tanstack/react-virtual` to fix warnings in React 19 projects ([#3588](https://github.com/tailwindlabs/headlessui/pull/3588)) - Fix `aria-invalid` attributes to have a valid `'true'` value ([#3639](https://github.com/tailwindlabs/headlessui/pull/3639)) +- Add missing `invalid` prop to `Combobox` component ([#3677](https://github.com/tailwindlabs/headlessui/pull/3677)) ## [2.2.0] - 2024-10-25 diff --git a/packages/@headlessui-react/src/components/combobox/combobox.test.tsx b/packages/@headlessui-react/src/components/combobox/combobox.test.tsx index 30ee990..367fa15 100644 --- a/packages/@headlessui-react/src/components/combobox/combobox.test.tsx +++ b/packages/@headlessui-react/src/components/combobox/combobox.test.tsx @@ -1045,6 +1045,7 @@ describe('Rendering', () => { open: false, active: false, disabled: false, + invalid: false, value: 'test', hover: false, focus: false, @@ -1061,6 +1062,7 @@ describe('Rendering', () => { open: true, active: true, disabled: false, + invalid: false, value: 'test', hover: false, focus: false, @@ -1094,6 +1096,7 @@ describe('Rendering', () => { open: false, active: false, disabled: false, + invalid: false, value: 'test', hover: false, focus: false, @@ -1110,6 +1113,7 @@ describe('Rendering', () => { open: true, active: true, disabled: false, + invalid: false, value: 'test', hover: false, focus: false, diff --git a/packages/@headlessui-react/src/components/combobox/combobox.tsx b/packages/@headlessui-react/src/components/combobox/combobox.tsx index cebbb74..d0dce90 100644 --- a/packages/@headlessui-react/src/components/combobox/combobox.tsx +++ b/packages/@headlessui-react/src/components/combobox/combobox.tsx @@ -577,6 +577,7 @@ let ComboboxDataContext = createContext< value: unknown defaultValue: unknown disabled: boolean + invalid: boolean mode: ValueMode activeOptionIndex: number | null immediate: boolean @@ -619,6 +620,7 @@ let DEFAULT_COMBOBOX_TAG = Fragment type ComboboxRenderPropArg = { open: boolean disabled: boolean + invalid: boolean activeIndex: number | null activeOption: TActive | null value: TValue @@ -648,6 +650,7 @@ export type ComboboxProps< multiple?: TMultiple disabled?: boolean + invalid?: boolean form?: string name?: string immediate?: boolean @@ -676,6 +679,7 @@ function ComboboxFn { @@ -813,6 +818,7 @@ function ComboboxFn - }, [data, disabled, value]) + }, [data, disabled, value, invalid]) let selectActiveOption = useEvent(() => { if (data.activeOptionIndex === null) return @@ -999,6 +1005,7 @@ let DEFAULT_INPUT_TAG = 'input' as const type InputRenderPropArg = { open: boolean disabled: boolean + invalid: boolean hover: boolean focus: boolean autofocus: boolean @@ -1398,11 +1405,12 @@ function InputFn< return { open: data.comboboxState === ComboboxState.Open, disabled, + invalid: data.invalid, hover, focus, autofocus: autoFocus, } satisfies InputRenderPropArg - }, [data, hover, focus, autoFocus, disabled]) + }, [data, hover, focus, autoFocus, disabled, data.invalid]) let ourProps = mergeProps( { @@ -1463,6 +1471,7 @@ type ButtonRenderPropArg = { open: boolean active: boolean disabled: boolean + invalid: boolean value: any focus: boolean hover: boolean @@ -1587,6 +1596,7 @@ function ButtonFn( open: data.comboboxState === ComboboxState.Open, active: active || data.comboboxState === ComboboxState.Open, disabled, + invalid: data.invalid, value: data.value, hover, focus,