From 00f84acb217900c64b83512db38557ada1812ec6 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Thu, 11 Apr 2024 18:03:16 +0200 Subject: [PATCH] Render hidden form input fields for `Checkbox`, `Switch` and `RadioGroup` components (#3095) * 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. * 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. * update changelog --- packages/@headlessui-react/CHANGELOG.md | 1 + .../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 ++- packages/@headlessui-react/src/internal/form-fields.tsx | 3 +++ 6 files changed, 15 insertions(+), 6 deletions(-) diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md index 6c9ecf293..369484268 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 diff --git a/packages/@headlessui-react/src/components/checkbox/checkbox.test.tsx b/packages/@headlessui-react/src/components/checkbox/checkbox.test.tsx index 623fcdb38..4aff6769e 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 1c179ecc8..a8d743ac0 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 93fce6fa2..358510660 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 56b6c7b0b..45cc4a3fc 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 && ( diff --git a/packages/@headlessui-react/src/internal/form-fields.tsx b/packages/@headlessui-react/src/internal/form-fields.tsx index ab94d9877..d0d960c08 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, })} /> )