From 382a613e54157117da437d529d5546d72a26fc16 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Thu, 11 Apr 2024 17:18:08 +0200 Subject: [PATCH 1/3] add `overrides` prop to internal `FormFields` By default, the hidden form fields render an ``. However, we have some components where we explicitly want to change the type for example `checkbox` or `radio` types. I first tried to encode this information in the data itself. That requires us to use symbols so that we don't accidentally choose a key that actually exists in the data. An overrides key solves this for our use cases. The component is also internal, so nothing is exposed to the user. --- packages/@headlessui-react/src/internal/form-fields.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/@headlessui-react/src/internal/form-fields.tsx b/packages/@headlessui-react/src/internal/form-fields.tsx index ab94d98772..d0d960c088 100644 --- a/packages/@headlessui-react/src/internal/form-fields.tsx +++ b/packages/@headlessui-react/src/internal/form-fields.tsx @@ -33,8 +33,10 @@ export function FormFields({ form: formId, disabled, onReset, + overrides, }: { data: Record + overrides?: Record form?: string disabled?: boolean onReset?: (e: Event) => void @@ -66,6 +68,7 @@ export function FormFields({ disabled, name, value, + ...overrides, })} /> ) From 93e423b8266efc588e41ed9116a75f3c15e88933 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Thu, 11 Apr 2024 17:20:17 +0200 Subject: [PATCH 2/3] always render hidden form elements In case of checkboxes and radio elements, we will only render the hidden inputs if: 1. You pass a `name` prop to make it form-aware 2. When the checkbox / radio is "checked" This is now changed to always render the hidden input as long as the `name` prop is passed to make it form-aware. --- .../src/components/checkbox/checkbox.test.tsx | 8 +++++--- .../src/components/checkbox/checkbox.tsx | 3 ++- .../src/components/radio-group/radio-group.tsx | 3 ++- .../@headlessui-react/src/components/switch/switch.tsx | 3 ++- 4 files changed, 11 insertions(+), 6 deletions(-) diff --git a/packages/@headlessui-react/src/components/checkbox/checkbox.test.tsx b/packages/@headlessui-react/src/components/checkbox/checkbox.test.tsx index 623fcdb380..4aff6769e4 100644 --- a/packages/@headlessui-react/src/components/checkbox/checkbox.test.tsx +++ b/packages/@headlessui-react/src/components/checkbox/checkbox.test.tsx @@ -135,8 +135,10 @@ describe('Form submissions', () => { ) + let checkbox = document.querySelector('[id^="headlessui-checkbox-"]') as HTMLInputElement + // Focus the checkbox - await focus(getCheckbox()) + await focus(checkbox) // Submit await press(Keys.Enter) @@ -145,7 +147,7 @@ describe('Form submissions', () => { expect(handleSubmission).toHaveBeenLastCalledWith({}) // Toggle - await click(getCheckbox()) + await click(checkbox) // Submit await press(Keys.Enter) @@ -154,7 +156,7 @@ describe('Form submissions', () => { expect(handleSubmission).toHaveBeenLastCalledWith({ notifications: 'on' }) // Toggle - await click(getCheckbox()) + await click(checkbox) // Submit await press(Keys.Enter) diff --git a/packages/@headlessui-react/src/components/checkbox/checkbox.tsx b/packages/@headlessui-react/src/components/checkbox/checkbox.tsx index 1c179ecc83..a8d743ac07 100644 --- a/packages/@headlessui-react/src/components/checkbox/checkbox.tsx +++ b/packages/@headlessui-react/src/components/checkbox/checkbox.tsx @@ -174,7 +174,8 @@ function CheckboxFn 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 93fce6fa2a..3585106600 100644 --- a/packages/@headlessui-react/src/components/radio-group/radio-group.tsx +++ b/packages/@headlessui-react/src/components/radio-group/radio-group.tsx @@ -315,7 +315,8 @@ function RadioGroupFn diff --git a/packages/@headlessui-react/src/components/switch/switch.tsx b/packages/@headlessui-react/src/components/switch/switch.tsx index 56b6c7b0bb..45cc4a3fc7 100644 --- a/packages/@headlessui-react/src/components/switch/switch.tsx +++ b/packages/@headlessui-react/src/components/switch/switch.tsx @@ -240,7 +240,8 @@ function SwitchFn( {name != null && ( From 7037b35d65f2be83dea6b95c074d25f0be84f124 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Thu, 11 Apr 2024 17:28:44 +0200 Subject: [PATCH 3/3] update changelog --- packages/@headlessui-react/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md index 6c9ecf2933..3694842687 100644 --- a/packages/@headlessui-react/CHANGELOG.md +++ b/packages/@headlessui-react/CHANGELOG.md @@ -24,6 +24,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Fix cursor position when re-focusing the `ComboboxInput` component ([#3065](https://github.com/tailwindlabs/headlessui/pull/3065)) - Keep focus inside of the `` component ([#3073](https://github.com/tailwindlabs/headlessui/pull/3073)) - Fix enter transitions for the `Transition` component ([#3074](https://github.com/tailwindlabs/headlessui/pull/3074)) +- Render hidden form input fields for `Checkbox`, `Switch` and `RadioGroup` components ([#3095](https://github.com/tailwindlabs/headlessui/pull/3095)) ### Changed