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.
tailwindlabs · Apr 11, 2024 · 93e423b · 93e423b
1 parent 382a613
commit 93e423b
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 6 deletions.
diff --git 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', () => {
       </form>
     )
 
+    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
@@ -174,7 +174,8 @@ function CheckboxFn<TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG, TTyp
       {name != null && (
         <FormFields
           disabled={disabled}
-          data={checked ? { [name]: value || 'on' } : {}}
+          data={{ [name]: value || 'on' }}
+          overrides={{ type: 'checkbox', checked }}
           form={form}
           onReset={reset}
         />

diff --git 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<TTag extends ElementType = typeof DEFAULT_RADIO_GROUP_TAG,
             {name != null && (
               <FormFields
                 disabled={disabled}
-                data={value != null ? { [name]: value || 'on' } : {}}
+                data={{ [name]: value || 'on' }}
+                overrides={{ type: 'radio', checked: value != null }}
                 form={form}
                 onReset={reset}
               />

diff --git a/packages/@headlessui-react/src/components/switch/switch.tsx b/packages/@headlessui-react/src/components/switch/switch.tsx
@@ -240,7 +240,8 @@ function SwitchFn<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG>(
       {name != null && (
         <FormFields
           disabled={disabled}
-          data={checked ? { [name]: value || 'on' } : {}}
+          data={{ [name]: value || 'on' }}
+          overrides={{ type: 'checkbox', checked }}
           form={form}
           onReset={reset}
         />