diff --git a/packages/@headlessui-react/src/components/combobox/combobox.test.tsx b/packages/@headlessui-react/src/components/combobox/combobox.test.tsx
index 525f345c0f..562a33ea87 100644
--- a/packages/@headlessui-react/src/components/combobox/combobox.test.tsx
+++ b/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 (
+
+ )
+ }
+
+ render()
+
+ // 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 = [
diff --git a/packages/@headlessui-react/src/components/listbox/listbox.test.tsx b/packages/@headlessui-react/src/components/listbox/listbox.test.tsx
index acab32640c..b06c177424 100644
--- a/packages/@headlessui-react/src/components/listbox/listbox.test.tsx
+++ b/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 (
+
+ )
+ }
+
+ render()
+
+ // 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 = [
diff --git a/packages/@headlessui-react/src/components/radio-group/radio-group.test.tsx b/packages/@headlessui-react/src/components/radio-group/radio-group.test.tsx
index 85f0fd45a6..436b2e3afe 100644
--- a/packages/@headlessui-react/src/components/radio-group/radio-group.test.tsx
+++ b/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 (
+
+ )
+ }
+
+ render()
+
+ // 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 () => {
diff --git a/packages/@headlessui-react/src/components/switch/switch.test.tsx b/packages/@headlessui-react/src/components/switch/switch.test.tsx
index b6988f2a0a..06d2c46d86 100644
--- a/packages/@headlessui-react/src/components/switch/switch.test.tsx
+++ b/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 (
+
+ )
+ }
+
+ render()
+
+ // Submit the form
+ await click(getByText('Submit'))
+
+ // Verify that the form has been submitted
+ expect(submits).toHaveBeenLastCalledWith([
+ ['foo', 'bar'], // The only available field
+ ])
+ })
})
diff --git a/packages/@headlessui-react/src/test-utils/scenarios.tsx b/packages/@headlessui-react/src/test-utils/scenarios.tsx
index 31ee14fb93..c576a433e1 100644
--- a/packages/@headlessui-react/src/test-utils/scenarios.tsx
+++ b/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 (
+
+ )
+ }
+
+ render()
+
+ // 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 () => {
diff --git a/packages/@headlessui-vue/src/components/combobox/combobox.test.ts b/packages/@headlessui-vue/src/components/combobox/combobox.test.ts
index a3b638f098..3222bf15a7 100644
--- a/packages/@headlessui-vue/src/components/combobox/combobox.test.ts
+++ b/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`
+
+ `,
+ 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()
diff --git a/packages/@headlessui-vue/src/components/listbox/listbox.test.tsx b/packages/@headlessui-vue/src/components/listbox/listbox.test.tsx
index 5beb32b3df..b09c3c3f3a 100644
--- a/packages/@headlessui-vue/src/components/listbox/listbox.test.tsx
+++ b/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`
+
+ `,
+ 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()
diff --git a/packages/@headlessui-vue/src/components/radio-group/radio-group.test.ts b/packages/@headlessui-vue/src/components/radio-group/radio-group.test.ts
index f491ae1900..42d671a46a 100644
--- a/packages/@headlessui-vue/src/components/radio-group/radio-group.test.ts
+++ b/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`
+
+ `,
+ 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()
diff --git a/packages/@headlessui-vue/src/components/switch/switch.test.tsx b/packages/@headlessui-vue/src/components/switch/switch.test.tsx
index c4008b438b..ce39576fa5 100644
--- a/packages/@headlessui-vue/src/components/switch/switch.test.tsx
+++ b/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`
+
+ `,
+ 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
+ ])
+ })
})