add tests to verify disabled hidden form elements

packages/@headlessui-react/src/components/combobox/combobox.test.tsx

@@ -5747,6 +5747,48 @@ describe('Form compatibility', () => {
     expect(submits).toHaveBeenLastCalledWith([['delivery', 'pickup']])
   })
 
+  it('should not submit the data if the Combobox is disabled', async () => {
+    let submits = jest.fn()
+
+    function Example() {
+      let [value, setValue] = useState('home-delivery')
+      return (
+        <form
+          onSubmit={(event) => {
+            event.preventDefault()
+            submits([...new FormData(event.currentTarget).entries()])
+          }}
+        >
+          <input type="hidden" name="foo" value="bar" />
+          <Combobox value={value} onChange={setValue} name="delivery" disabled>
+            <Combobox.Input onChange={NOOP} />
+            <Combobox.Button>Trigger</Combobox.Button>
+            <Combobox.Label>Pizza Delivery</Combobox.Label>
+            <Combobox.Options>
+              <Combobox.Option value="pickup">Pickup</Combobox.Option>
+              <Combobox.Option value="home-delivery">Home delivery</Combobox.Option>
+              <Combobox.Option value="dine-in">Dine in</Combobox.Option>
+            </Combobox.Options>
+          </Combobox>
+          <button>Submit</button>
+        </form>
+      )
+    }
+
+    render(<Example />)
+
+    // Open combobox
+    await click(getComboboxButton())
+
+    // Submit the form
+    await click(getByText('Submit'))
+
+    // Verify that the form has been submitted
+    expect(submits).toHaveBeenLastCalledWith([
+      ['foo', 'bar'], // The only available field
+    ])
+  })
+
   it('should be possible to submit a form with a complex value object', async () => {
     let submits = jest.fn()
     let options = [

packages/@headlessui-react/src/components/listbox/listbox.test.tsx

@@ -4670,6 +4670,47 @@ describe('Form compatibility', () => {
     expect(submits).toHaveBeenLastCalledWith([['delivery', 'pickup']])
   })
 
+  it('should not submit the data if the Listbox is disabled', async () => {
+    let submits = jest.fn()
+
+    function Example() {
+      let [value, setValue] = useState('home-delivery')
+      return (
+        <form
+          onSubmit={(event) => {
+            event.preventDefault()
+            submits([...new FormData(event.currentTarget).entries()])
+          }}
+        >
+          <input type="hidden" name="foo" value="bar" />
+          <Listbox value={value} onChange={setValue} name="delivery" disabled>
+            <Listbox.Button>Trigger</Listbox.Button>
+            <Listbox.Label>Pizza Delivery</Listbox.Label>
+            <Listbox.Options>
+              <Listbox.Option value="pickup">Pickup</Listbox.Option>
+              <Listbox.Option value="home-delivery">Home delivery</Listbox.Option>
+              <Listbox.Option value="dine-in">Dine in</Listbox.Option>
+            </Listbox.Options>
+          </Listbox>
+          <button>Submit</button>
+        </form>
+      )
+    }
+
+    render(<Example />)
+
+    // Open listbox
+    await click(getListboxButton())
+
+    // Submit the form
+    await click(getByText('Submit'))
+
+    // Verify that the form has been submitted
+    expect(submits).toHaveBeenLastCalledWith([
+      ['foo', 'bar'], // The only available field
+    ])
+  })
+
   it('should be possible to submit a form with a complex value object', async () => {
     let submits = jest.fn()
     let options = [

packages/@headlessui-react/src/components/radio-group/radio-group.test.tsx

@@ -1539,6 +1539,41 @@ describe('Form compatibility', () => {
     })
   )
 
+  it('should not submit the data if the RadioGroup is disabled', async () => {
+    let submits = jest.fn()
+
+    function Example() {
+      let [value, setValue] = useState('home-delivery')
+      return (
+        <form
+          onSubmit={(event) => {
+            event.preventDefault()
+            submits([...new FormData(event.currentTarget).entries()])
+          }}
+        >
+          <input type="hidden" name="foo" value="bar" />
+          <RadioGroup value={value} onChange={setValue} name="delivery" disabled>
+            <RadioGroup.Label>Pizza Delivery</RadioGroup.Label>
+            <RadioGroup.Option value="pickup">Pickup</RadioGroup.Option>
+            <RadioGroup.Option value="home-delivery">Home delivery</RadioGroup.Option>
+            <RadioGroup.Option value="dine-in">Dine in</RadioGroup.Option>
+          </RadioGroup>
+          <button>Submit</button>
+        </form>
+      )
+    }
+
+    render(<Example />)
+
+    // Submit the form
+    await click(getByText('Submit'))
+
+    // Verify that the form has been submitted
+    expect(submits).toHaveBeenLastCalledWith([
+      ['foo', 'bar'], // The only available field
+    ])
+  })
+
   it(
     'should be possible to submit a form with a complex value object',
     suppressConsoleLogs(async () => {

packages/@headlessui-react/src/components/switch/switch.test.tsx

@@ -810,4 +810,37 @@ describe('Form compatibility', () => {
     // Verify that the form has been submitted
     expect(submits).toHaveBeenLastCalledWith([['fruit', 'apple']])
   })
+
+  it('should not submit the data if the Switch is disabled', async () => {
+    let submits = jest.fn()
+
+    function Example() {
+      let [state, setState] = useState(true)
+      return (
+        <form
+          onSubmit={(event) => {
+            event.preventDefault()
+            submits([...new FormData(event.currentTarget).entries()])
+          }}
+        >
+          <input type="hidden" name="foo" value="bar" />
+          <Switch.Group>
+            <Switch checked={state} onChange={setState} name="fruit" value="apple" disabled />
+            <Switch.Label>Apple</Switch.Label>
+          </Switch.Group>
+          <button>Submit</button>
+        </form>
+      )
+    }
+
+    render(<Example />)
+
+    // Submit the form
+    await click(getByText('Submit'))
+
+    // Verify that the form has been submitted
+    expect(submits).toHaveBeenLastCalledWith([
+      ['foo', 'bar'], // The only available field
+    ])
+  })
 })

packages/@headlessui-react/src/test-utils/scenarios.tsx

@@ -202,6 +202,35 @@ export function commonFormScenarios(
       expect(formDataMock.mock.calls[0][0].has('foo')).toBe(true)
     })
 
+    it('should not submit the data if the control is disabled', async () => {
+      let submits = jest.fn()
+
+      function Example() {
+        return (
+          <form
+            onSubmit={(event) => {
+              event.preventDefault()
+              submits([...new FormData(event.currentTarget).entries()])
+            }}
+          >
+            <input type="hidden" name="foo" value="bar" />
+            <Control name="bar" disabled />
+            <button>Submit</button>
+          </form>
+        )
+      }
+
+      render(<Example />)
+
+      // Submit the form
+      await click(screen.getByText('Submit'))
+
+      // Verify that the form has been submitted
+      expect(submits).toHaveBeenLastCalledWith([
+        ['foo', 'bar'], // The only available field
+      ])
+    })
+
     it(
       'should reset the control when the form is reset',
       suppressConsoleLogs(async () => {

packages/@headlessui-vue/src/components/combobox/combobox.test.ts

@@ -6146,6 +6146,49 @@ describe('Form compatibility', () => {
     expect(submits).lastCalledWith([['delivery', 'pickup']])
   })
 
+  it('should not submit the data if the Combobox is disabled', async () => {
+    let submits = jest.fn()
+
+    renderTemplate({
+      template: html`
+        <form @submit="handleSubmit">
+          <input type="hidden" name="foo" value="bar" />
+          <Combobox v-model="value" name="delivery" disabled>
+            <ComboboxInput />
+            <ComboboxButton>Trigger</ComboboxButton>
+            <ComboboxOptions>
+              <ComboboxOption value="pickup">Pickup</ComboboxOption>
+              <ComboboxOption value="home-delivery">Home delivery</ComboboxOption>
+              <ComboboxOption value="dine-in">Dine in</ComboboxOption>
+            </ComboboxOptions>
+          </Combobox>
+          <button>Submit</button>
+        </form>
+      `,
+      setup: () => {
+        let value = ref('home-delivery')
+        return {
+          value,
+          handleSubmit(event: SubmitEvent) {
+            event.preventDefault()
+            submits([...new FormData(event.currentTarget as HTMLFormElement).entries()])
+          },
+        }
+      },
+    })
+
+    // Open combobox
+    await click(getComboboxButton())
+
+    // Submit the form
+    await click(getByText('Submit'))
+
+    // Verify that the form has been submitted
+    expect(submits).toHaveBeenLastCalledWith([
+      ['foo', 'bar'], // The only available field
+    ])
+  })
+
   it('should be possible to submit a form with a complex value object', async () => {
     let submits = jest.fn()
 

packages/@headlessui-vue/src/components/listbox/listbox.test.tsx

@@ -5071,6 +5071,48 @@ describe('Form compatibility', () => {
     expect(submits).lastCalledWith([['delivery', 'pickup']])
   })
 
+  it('should not submit the data if the Listbox is disabled', async () => {
+    let submits = jest.fn()
+
+    renderTemplate({
+      template: html`
+        <form @submit="handleSubmit">
+          <input type="hidden" name="foo" value="bar" />
+          <Listbox v-model="value" name="delivery" disabled>
+            <ListboxButton>Trigger</ListboxButton>
+            <ListboxOptions>
+              <ListboxOption value="pickup">Pickup</ListboxOption>
+              <ListboxOption value="home-delivery">Home delivery</ListboxOption>
+              <ListboxOption value="dine-in">Dine in</ListboxOption>
+            </ListboxOptions>
+          </Listbox>
+          <button>Submit</button>
+        </form>
+      `,
+      setup: () => {
+        let value = ref('home-delivery')
+        return {
+          value,
+          handleSubmit(event: SubmitEvent) {
+            event.preventDefault()
+            submits([...new FormData(event.currentTarget as HTMLFormElement).entries()])
+          },
+        }
+      },
+    })
+
+    // Open listbox
+    await click(getListboxButton())
+
+    // Submit the form
+    await click(getByText('Submit'))
+
+    // Verify that the form has been submitted
+    expect(submits).toHaveBeenLastCalledWith([
+      ['foo', 'bar'], // The only available field
+    ])
+  })
+
   it('should be possible to submit a form with a complex value object', async () => {
     let submits = jest.fn()
 

packages/@headlessui-vue/src/components/radio-group/radio-group.test.ts

@@ -1680,6 +1680,43 @@ describe('Form compatibility', () => {
     expect(submits).lastCalledWith([['delivery', 'pickup']])
   })
 
+  it('should not submit the data if the RadioGroup is disabled', async () => {
+    let submits = jest.fn()
+
+    renderTemplate({
+      template: html`
+        <form @submit="handleSubmit">
+          <input type="hidden" name="foo" value="bar" />
+          <RadioGroup v-model="value" name="delivery" disabled>
+            <RadioGroupLabel>Pizza Delivery</RadioGroupLabel>
+            <RadioGroupOption value="pickup">Pickup</RadioGroupOption>
+            <RadioGroupOption value="home-delivery">Home delivery</RadioGroupOption>
+            <RadioGroupOption value="dine-in">Dine in</RadioGroupOption>
+          </RadioGroup>
+          <button>Submit</button>
+        </form>
+      `,
+      setup: () => {
+        let value = ref('home-delivery')
+        return {
+          value,
+          handleSubmit(event: SubmitEvent) {
+            event.preventDefault()
+            submits([...new FormData(event.currentTarget as HTMLFormElement).entries()])
+          },
+        }
+      },
+    })
+
+    // Submit the form
+    await click(getByText('Submit'))
+
+    // Verify that the form has been submitted
+    expect(submits).toHaveBeenLastCalledWith([
+      ['foo', 'bar'], // The only available field
+    ])
+  })
+
   it('should be possible to submit a form with a complex value object', async () => {
     let submits = jest.fn()
 

packages/@headlessui-vue/src/components/switch/switch.test.tsx

@@ -929,4 +929,39 @@ describe('Form compatibility', () => {
     // Verify that the form has been submitted
     expect(submits).lastCalledWith([['fruit', 'apple']])
   })
+
+  it('should not submit the data if the Switch is disabled', async () => {
+    let submits = jest.fn()
+
+    renderTemplate({
+      template: html`
+        <form @submit="handleSubmit">
+          <input type="hidden" name="foo" value="bar" />
+          <SwitchGroup>
+            <Switch v-model="checked" name="fruit" value="apple" disabled />
+            <SwitchLabel>Apple</SwitchLabel>
+          </SwitchGroup>
+          <button>Submit</button>
+        </form>
+      `,
+      setup: () => {
+        let checked = ref(true)
+        return {
+          checked,
+          handleSubmit(event: SubmitEvent) {
+            event.preventDefault()
+            submits([...new FormData(event.currentTarget as HTMLFormElement).entries()])
+          },
+        }
+      },
+    })
+
+    // Submit the form
+    await click(getByText('Submit'))
+
+    // Verify that the form has been submitted
+    expect(submits).toHaveBeenLastCalledWith([
+      ['foo', 'bar'], // The only available field
+    ])
+  })
 })