make hidden inputs disabled if the wrapping component is disabled

tailwindlabs · Feb 21, 2024 · 3fdf345 · 3fdf345
1 parent 08baf09
commit 3fdf345
Show file tree

Hide file tree

Showing 10 changed files with 28 additions and 3 deletions.
diff --git a/packages/@headlessui-react/src/components/checkbox/checkbox.tsx b/packages/@headlessui-react/src/components/checkbox/checkbox.tsx
@@ -173,7 +173,12 @@ function CheckboxFn<TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG, TTyp
   return (
     <>
       {name != null && (
-        <FormFields data={checked ? { [name]: value || 'on' } : {}} form={form} onReset={reset} />
+        <FormFields
+          disabled={disabled}
+          data={checked ? { [name]: value || 'on' } : {}}
+          form={form}
+          onReset={reset}
+        />
       )}
       {render({
         ourProps,

diff --git a/packages/@headlessui-react/src/components/combobox/combobox.tsx b/packages/@headlessui-react/src/components/combobox/combobox.tsx
@@ -907,6 +907,7 @@ function ComboboxFn<TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_T
             >
               {name != null && (
                 <FormFields
+                  disabled={disabled}
                   data={value != null ? { [name]: value } : {}}
                   form={form}
                   onReset={reset}

diff --git a/packages/@headlessui-react/src/components/listbox/listbox.tsx b/packages/@headlessui-react/src/components/listbox/listbox.tsx
@@ -670,7 +670,12 @@ function ListboxFn<
               })}
             >
               {name != null && value != null && (
-                <FormFields data={{ [name]: value }} form={form} onReset={reset} />
+                <FormFields
+                  disabled={disabled}
+                  data={{ [name]: value }}
+                  form={form}
+                  onReset={reset}
+                />
               )}
               {render({
                 ourProps,

diff --git a/packages/@headlessui-react/src/components/radio-group/radio-group.tsx b/packages/@headlessui-react/src/components/radio-group/radio-group.tsx
@@ -314,6 +314,7 @@ function RadioGroupFn<TTag extends ElementType = typeof DEFAULT_RADIO_GROUP_TAG,
           <RadioGroupDataContext.Provider value={radioGroupData}>
             {name != null && (
               <FormFields
+                disabled={disabled}
                 data={value != null ? { [name]: value || 'on' } : {}}
                 form={form}
                 onReset={reset}

diff --git a/packages/@headlessui-react/src/components/switch/switch.tsx b/packages/@headlessui-react/src/components/switch/switch.tsx
@@ -237,7 +237,12 @@ function SwitchFn<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG>(
   return (
     <>
       {name != null && (
-        <FormFields data={checked ? { [name]: value || 'on' } : {}} form={form} onReset={reset} />
+        <FormFields
+          disabled={disabled}
+          data={checked ? { [name]: value || 'on' } : {}}
+          form={form}
+          onReset={reset}
+        />
       )}
       {render({ ourProps, theirProps, slot, defaultTag: DEFAULT_SWITCH_TAG, name: 'Switch' })}
     </>

diff --git a/packages/@headlessui-react/src/internal/form-fields.tsx b/packages/@headlessui-react/src/internal/form-fields.tsx
@@ -31,10 +31,12 @@ export function HoistFormFields({ children }: React.PropsWithChildren<{}>) {
 export function FormFields({
   data,
   form: formId,
+  disabled,
   onReset,
 }: {
   data: Record<string, any>
   form?: string
+  disabled?: boolean
   onReset?: (e: Event) => void
 }) {
   let [form, setForm] = useState<HTMLFormElement | null>(null)
@@ -61,6 +63,7 @@ export function FormFields({
               hidden: true,
               readOnly: true,
               form: formId,
+              disabled,
               name,
               value,
             })}

diff --git a/packages/@headlessui-vue/src/components/combobox/combobox.ts b/packages/@headlessui-vue/src/components/combobox/combobox.ts
@@ -735,6 +735,7 @@ export let Combobox = defineComponent({
                   hidden: true,
                   readOnly: true,
                   form,
+                  disabled,
                   name,
                   value,
                 })

diff --git a/packages/@headlessui-vue/src/components/listbox/listbox.ts b/packages/@headlessui-vue/src/components/listbox/listbox.ts
@@ -392,6 +392,7 @@ export let Listbox = defineComponent({
                   hidden: true,
                   readOnly: true,
                   form,
+                  disabled,
                   name,
                   value,
                 })

diff --git a/packages/@headlessui-vue/src/components/radio-group/radio-group.ts b/packages/@headlessui-vue/src/components/radio-group/radio-group.ts
@@ -262,6 +262,7 @@ export let RadioGroup = defineComponent({
                   hidden: true,
                   readOnly: true,
                   form,
+                  disabled,
                   name,
                   value,
                 })

diff --git a/packages/@headlessui-vue/src/components/switch/switch.ts b/packages/@headlessui-vue/src/components/switch/switch.ts
@@ -78,6 +78,7 @@ export let Switch = defineComponent({
     name: { type: String, optional: true },
     value: { type: String, optional: true },
     id: { type: String, default: () => `headlessui-switch-${useId()}` },
+    disabled: { type: Boolean, default: false },
     tabIndex: { type: Number, default: 0 },
   },
   inheritAttrs: false,
@@ -172,6 +173,7 @@ export let Switch = defineComponent({
                 readOnly: true,
                 checked: checked.value,
                 form,
+                disabled: theirProps.disabled,
                 name,
                 value,
               })