diff --git a/packages/@headlessui-react/src/components/combobox/combobox.test.tsx b/packages/@headlessui-react/src/components/combobox/combobox.test.tsx index 525f345c0..562a33ea8 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 ( +
{ + event.preventDefault() + submits([...new FormData(event.currentTarget).entries()]) + }} + > + + + + Trigger + Pizza Delivery + + Pickup + Home delivery + Dine in + + + +
+ ) + } + + 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 acab32640..b06c17742 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 ( +
{ + event.preventDefault() + submits([...new FormData(event.currentTarget).entries()]) + }} + > + + + Trigger + Pizza Delivery + + Pickup + Home delivery + Dine in + + + +
+ ) + } + + 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 85f0fd45a..436b2e3af 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 ( +
{ + event.preventDefault() + submits([...new FormData(event.currentTarget).entries()]) + }} + > + + + Pizza Delivery + Pickup + Home delivery + Dine in + + +
+ ) + } + + 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 b6988f2a0..06d2c46d8 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 ( +
{ + event.preventDefault() + submits([...new FormData(event.currentTarget).entries()]) + }} + > + + + + Apple + + +
+ ) + } + + 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 31ee14fb9..c576a433e 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 ( +
{ + event.preventDefault() + submits([...new FormData(event.currentTarget).entries()]) + }} + > + + + + + ) + } + + 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 a3b638f09..3222bf15a 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` +
+ + + + Trigger + + Pickup + Home delivery + Dine in + + + +
+ `, + 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 5beb32b3d..b09c3c3f3 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` +
+ + + Trigger + + Pickup + Home delivery + Dine in + + + +
+ `, + 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 f491ae190..42d671a46 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` +
+ + + Pizza Delivery + Pickup + Home delivery + Dine in + + +
+ `, + 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 c4008b438..ce39576fa 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` +
+ + + + Apple + + +
+ `, + 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 + ]) + }) })