From 13463f0295ef6d0a618d98448d8af97b9fbd25fa Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 2 Sep 2022 16:10:10 -0400 Subject: [PATCH] Fix nullable by prop for combobox and radio group (#1815) * Fix nullable by prop for combobox and radio group * Update changelog --- packages/@headlessui-react/CHANGELOG.md | 2 +- .../src/components/combobox/combobox.test.tsx | 38 ++++++++++++++++++ .../src/components/combobox/combobox.tsx | 2 +- .../radio-group/radio-group.test.tsx | 33 ++++++++++++++++ .../components/radio-group/radio-group.tsx | 2 +- packages/@headlessui-vue/CHANGELOG.md | 2 +- .../src/components/combobox/combobox.test.ts | 39 +++++++++++++++++++ .../src/components/combobox/combobox.ts | 2 +- .../radio-group/radio-group.test.ts | 35 +++++++++++++++++ .../src/components/radio-group/radio-group.ts | 2 +- 10 files changed, 151 insertions(+), 6 deletions(-) diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md index 63bcef9..c896cab 100644 --- a/packages/@headlessui-react/CHANGELOG.md +++ b/packages/@headlessui-react/CHANGELOG.md @@ -9,7 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added -- Add `by` prop for `Listbox`, `Combobox` and `RadioGroup` ([#1482](https://github.com/tailwindlabs/headlessui/pull/1482), [#1717](https://github.com/tailwindlabs/headlessui/pull/1717), [#1814](https://github.com/tailwindlabs/headlessui/pull/1814)) +- Add `by` prop for `Listbox`, `Combobox` and `RadioGroup` ([#1482](https://github.com/tailwindlabs/headlessui/pull/1482), [#1717](https://github.com/tailwindlabs/headlessui/pull/1717), [#1814](https://github.com/tailwindlabs/headlessui/pull/1814), [#1815](https://github.com/tailwindlabs/headlessui/pull/1815)) - Add `@headlessui/tailwindcss` plugin ([#1487](https://github.com/tailwindlabs/headlessui/pull/1487)) ### Fixed diff --git a/packages/@headlessui-react/src/components/combobox/combobox.test.tsx b/packages/@headlessui-react/src/components/combobox/combobox.test.tsx index e9d4f7f..05946bf 100644 --- a/packages/@headlessui-react/src/components/combobox/combobox.test.tsx +++ b/packages/@headlessui-react/src/components/combobox/combobox.test.tsx @@ -209,6 +209,44 @@ describe('Rendering', () => { }) ) + it( + 'should be possible to compare null values by a field', + suppressConsoleLogs(async () => { + render( + + Trigger + + {options.map((option) => ( + JSON.stringify(info)} + > + {option.name} + + ))} + + + ) + + await click(getComboboxButton()) + + let [alice, bob, charlie] = getComboboxOptions() + expect(alice).toHaveAttribute( + 'class', + JSON.stringify({ active: true, selected: false, disabled: false }) + ) + expect(bob).toHaveAttribute( + 'class', + JSON.stringify({ active: false, selected: false, disabled: false }) + ) + expect(charlie).toHaveAttribute( + 'class', + JSON.stringify({ active: false, selected: false, disabled: false }) + ) + }) + ) + it( 'should be possible to compare objects by a field', suppressConsoleLogs(async () => { diff --git a/packages/@headlessui-react/src/components/combobox/combobox.tsx b/packages/@headlessui-react/src/components/combobox/combobox.tsx index 525cea7..9e03a76 100644 --- a/packages/@headlessui-react/src/components/combobox/combobox.tsx +++ b/packages/@headlessui-react/src/components/combobox/combobox.tsx @@ -417,7 +417,7 @@ function ComboboxFn { let property = by as unknown as keyof TValue - return a[property] === z[property] + return a?.[property] === z?.[property] } : by ) diff --git a/packages/@headlessui-react/src/components/radio-group/radio-group.test.tsx b/packages/@headlessui-react/src/components/radio-group/radio-group.test.tsx index d6a2c84..990f0a6 100644 --- a/packages/@headlessui-react/src/components/radio-group/radio-group.test.tsx +++ b/packages/@headlessui-react/src/components/radio-group/radio-group.test.tsx @@ -404,6 +404,39 @@ describe('Rendering', () => { }) ) + it( + 'should be possible to compare null values by a field', + suppressConsoleLogs(async () => { + render( + + {options.map((option) => ( + JSON.stringify(info)} + > + {option.name} + + ))} + + ) + + let [alice, bob, charlie] = getRadioGroupOptions() + expect(alice).toHaveAttribute( + 'class', + JSON.stringify({ checked: false, disabled: false, active: false }) + ) + expect(bob).toHaveAttribute( + 'class', + JSON.stringify({ checked: false, disabled: false, active: false }) + ) + expect(charlie).toHaveAttribute( + 'class', + JSON.stringify({ checked: false, disabled: false, active: false }) + ) + }) + ) + it( 'should be possible to compare objects by a field', suppressConsoleLogs(async () => { diff --git a/packages/@headlessui-react/src/components/radio-group/radio-group.tsx b/packages/@headlessui-react/src/components/radio-group/radio-group.tsx index a1b82a5..c3769e8 100644 --- a/packages/@headlessui-react/src/components/radio-group/radio-group.tsx +++ b/packages/@headlessui-react/src/components/radio-group/radio-group.tsx @@ -140,7 +140,7 @@ let RadioGroupRoot = forwardRefWithAs(function RadioGroup< typeof by === 'string' ? (a: TType, z: TType) => { let property = by as unknown as keyof TType - return a[property] === z[property] + return a?.[property] === z?.[property] } : by ) diff --git a/packages/@headlessui-vue/CHANGELOG.md b/packages/@headlessui-vue/CHANGELOG.md index 132af10..cd7fdf2 100644 --- a/packages/@headlessui-vue/CHANGELOG.md +++ b/packages/@headlessui-vue/CHANGELOG.md @@ -9,7 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added -- Add `by` prop for `Listbox`, `Combobox` and `RadioGroup` ([#1482](https://github.com/tailwindlabs/headlessui/pull/1482), [#1717](https://github.com/tailwindlabs/headlessui/pull/1717), [#1814](https://github.com/tailwindlabs/headlessui/pull/1814)) +- Add `by` prop for `Listbox`, `Combobox` and `RadioGroup` ([#1482](https://github.com/tailwindlabs/headlessui/pull/1482), [#1717](https://github.com/tailwindlabs/headlessui/pull/1717), [#1814](https://github.com/tailwindlabs/headlessui/pull/1814), [#1815](https://github.com/tailwindlabs/headlessui/pull/1815)) - Add `@headlessui/tailwindcss` plugin ([#1487](https://github.com/tailwindlabs/headlessui/pull/1487)) ### Fixed diff --git a/packages/@headlessui-vue/src/components/combobox/combobox.test.ts b/packages/@headlessui-vue/src/components/combobox/combobox.test.ts index 1c8b34c..9b307d5 100644 --- a/packages/@headlessui-vue/src/components/combobox/combobox.test.ts +++ b/packages/@headlessui-vue/src/components/combobox/combobox.test.ts @@ -243,6 +243,45 @@ describe('Rendering', () => { }) ) + it( + 'should be possible to compare null values by a field', + suppressConsoleLogs(async () => { + renderTemplate({ + template: html` + + Trigger + + {{ JSON.stringify(data) }} + + + `, + setup: () => { + let value = ref(null) + return { options, value } + }, + }) + + await click(getComboboxButton()) + + let [alice, bob, charlie] = getComboboxOptions() + expect(alice).toHaveTextContent( + JSON.stringify({ active: true, selected: false, disabled: false }) + ) + expect(bob).toHaveTextContent( + JSON.stringify({ active: false, selected: false, disabled: false }) + ) + expect(charlie).toHaveTextContent( + JSON.stringify({ active: false, selected: false, disabled: false }) + ) + }) + ) + it( 'should be possible to compare objects by a field', suppressConsoleLogs(async () => { diff --git a/packages/@headlessui-vue/src/components/combobox/combobox.ts b/packages/@headlessui-vue/src/components/combobox/combobox.ts index b228309..159a8d3 100644 --- a/packages/@headlessui-vue/src/components/combobox/combobox.ts +++ b/packages/@headlessui-vue/src/components/combobox/combobox.ts @@ -187,7 +187,7 @@ export let Combobox = defineComponent({ compare(a: any, z: any) { if (typeof props.by === 'string') { let property = props.by as unknown as any - return a[property] === z[property] + return a?.[property] === z?.[property] } return props.by(a, z) }, diff --git a/packages/@headlessui-vue/src/components/radio-group/radio-group.test.ts b/packages/@headlessui-vue/src/components/radio-group/radio-group.test.ts index 1aed26d..0e97ddb 100644 --- a/packages/@headlessui-vue/src/components/radio-group/radio-group.test.ts +++ b/packages/@headlessui-vue/src/components/radio-group/radio-group.test.ts @@ -532,6 +532,41 @@ describe('Rendering', () => { }) ) + it( + 'should be possible to compare null values by a field', + suppressConsoleLogs(async () => { + renderTemplate({ + template: html` + + Trigger + {{ JSON.stringify(data) }} + + `, + setup: () => { + let value = ref(null) + return { options, value } + }, + }) + + let [alice, bob, charlie] = getRadioGroupOptions() + expect(alice).toHaveTextContent( + JSON.stringify({ checked: false, disabled: false, active: false }) + ) + expect(bob).toHaveTextContent( + JSON.stringify({ checked: false, disabled: false, active: false }) + ) + expect(charlie).toHaveTextContent( + JSON.stringify({ checked: false, disabled: false, active: false }) + ) + }) + ) + it( 'should be possible to compare objects by a field', suppressConsoleLogs(async () => { diff --git a/packages/@headlessui-vue/src/components/radio-group/radio-group.ts b/packages/@headlessui-vue/src/components/radio-group/radio-group.ts index ec0b1f1..1344209 100644 --- a/packages/@headlessui-vue/src/components/radio-group/radio-group.ts +++ b/packages/@headlessui-vue/src/components/radio-group/radio-group.ts @@ -115,7 +115,7 @@ export let RadioGroup = defineComponent({ compare(a: any, z: any) { if (typeof props.by === 'string') { let property = props.by as unknown as any - return a[property] === z[property] + return a?.[property] === z?.[property] } return props.by(a, z) },