Submit form on Enter even if no submit-like button was found (#2613)

* `requestSubmit` when a submit-like button cannot be found

* add tests

* update changelog

Author: RobinMalfait

packages/@headlessui-react/CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Improve "outside click" behaviour in combination with 3rd party libraries ([#2572](https://github.com/tailwindlabs/headlessui/pull/2572))
 - Ensure IME works on Android devices ([#2580](https://github.com/tailwindlabs/headlessui/pull/2580))
 - Calculate `aria-expanded` purely based on the open/closed state ([#2610](https://github.com/tailwindlabs/headlessui/pull/2610))
+- Submit form on `Enter` even if no submit-like button was found ([#2613](https://github.com/tailwindlabs/headlessui/pull/2613))
 
 ## [1.7.15] - 2023-06-01
 

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

@@ -2820,6 +2820,54 @@ describe('Keyboard interactions', () => {
           expect(submits).toHaveBeenCalledWith([['option', 'b']])
         })
       )
+
+      it(
+        'should submit the form on `Enter` (when no submit button was found)',
+        suppressConsoleLogs(async () => {
+          let submits = jest.fn()
+
+          function Example() {
+            let [value, setValue] = useState<string>('b')
+
+            return (
+              <form
+                onKeyUp={(event) => {
+                  // JSDom doesn't automatically submit the form but if we can
+                  // catch an `Enter` event, we can assume it was a submit.
+                  if (event.key === 'Enter') event.currentTarget.submit()
+                }}
+                onSubmit={(event) => {
+                  event.preventDefault()
+                  submits([...new FormData(event.currentTarget).entries()])
+                }}
+              >
+                <Combobox value={value} onChange={setValue} name="option">
+                  <Combobox.Input onChange={NOOP} />
+                  <Combobox.Button>Trigger</Combobox.Button>
+                  <Combobox.Options>
+                    <Combobox.Option value="a">Option A</Combobox.Option>
+                    <Combobox.Option value="b">Option B</Combobox.Option>
+                    <Combobox.Option value="c">Option C</Combobox.Option>
+                  </Combobox.Options>
+                </Combobox>
+              </form>
+            )
+          }
+
+          render(<Example />)
+
+          // Focus the input field
+          await focus(getComboboxInput())
+          assertActiveElement(getComboboxInput())
+
+          // Press enter (which should submit the form)
+          await press(Keys.Enter)
+
+          // Verify the form was submitted
+          expect(submits).toHaveBeenCalledTimes(1)
+          expect(submits).toHaveBeenCalledWith([['option', 'b']])
+        })
+      )
     })
 
     describe('`Tab` key', () => {

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

@@ -1286,6 +1286,44 @@ describe('Keyboard interactions', () => {
         expect(submits).toHaveBeenCalledWith([['option', 'bob']])
       })
     )
+
+    it(
+      'should submit the form on `Enter` (when no submit button was found)',
+      suppressConsoleLogs(async () => {
+        let submits = jest.fn()
+
+        function Example() {
+          let [value, setValue] = useState('bob')
+
+          return (
+            <form
+              onSubmit={(event) => {
+                event.preventDefault()
+                submits([...new FormData(event.currentTarget).entries()])
+              }}
+            >
+              <RadioGroup value={value} onChange={setValue} name="option">
+                <RadioGroup.Option value="alice">Alice</RadioGroup.Option>
+                <RadioGroup.Option value="bob">Bob</RadioGroup.Option>
+                <RadioGroup.Option value="charlie">Charlie</RadioGroup.Option>
+              </RadioGroup>
+            </form>
+          )
+        }
+
+        render(<Example />)
+
+        // Focus the RadioGroup
+        await press(Keys.Tab)
+
+        // Press enter (which should submit the form)
+        await press(Keys.Enter)
+
+        // Verify the form was submitted
+        expect(submits).toHaveBeenCalledTimes(1)
+        expect(submits).toHaveBeenCalledWith([['option', 'bob']])
+      })
+    )
   })
 })
 

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

@@ -461,6 +461,38 @@ describe('Keyboard interactions', () => {
       expect(submits).toHaveBeenCalledTimes(1)
       expect(submits).toHaveBeenCalledWith([['option', 'on']])
     })
+
+    it('should submit the form on `Enter` (when no submit button was found)', async () => {
+      let submits = jest.fn()
+
+      function Example() {
+        let [value, setValue] = useState(true)
+
+        return (
+          <form
+            onSubmit={(event) => {
+              event.preventDefault()
+              submits([...new FormData(event.currentTarget).entries()])
+            }}
+          >
+            <Switch checked={value} onChange={setValue} name="option" />
+          </form>
+        )
+      }
+
+      render(<Example />)
+
+      // Focus the input field
+      await focus(getSwitch())
+      assertActiveElement(getSwitch())
+
+      // Press enter (which should submit the form)
+      await press(Keys.Enter)
+
+      // Verify the form was submitted
+      expect(submits).toHaveBeenCalledTimes(1)
+      expect(submits).toHaveBeenCalledWith([['option', 'on']])
+    })
   })
 
   describe('`Tab` key', () => {

packages/@headlessui-react/src/utils/form.ts

@@ -54,4 +54,9 @@ export function attemptSubmit(element: HTMLElement) {
       return
     }
   }
+
+  // If we get here, then there is no submit button in the form. We can use the
+  // `form.requestSubmit()` function to submit the form instead. We cannot use `form.submit()`
+  // because then the `submit` event won't be fired and `onSubmit` listeners won't be fired.
+  form.requestSubmit()
 }

packages/@headlessui-vue/CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Improve performance of `Combobox` component ([#2574](https://github.com/tailwindlabs/headlessui/pull/2574))
 - Ensure IME works on Android devices ([#2580](https://github.com/tailwindlabs/headlessui/pull/2580))
 - Calculate `aria-expanded` purely based on the open/closed state ([#2610](https://github.com/tailwindlabs/headlessui/pull/2610))
+- Submit form on `Enter` even if no submit-like button was found ([#2613](https://github.com/tailwindlabs/headlessui/pull/2613))
 
 ## [1.7.14] - 2023-06-01
 

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

@@ -2941,6 +2941,55 @@ describe('Keyboard interactions', () => {
           expect(submits).toHaveBeenCalledWith([['option', 'b']])
         })
       )
+
+      it(
+        'should submit the form on `Enter` (when no submit button was found)',
+        suppressConsoleLogs(async () => {
+          let submits = jest.fn()
+
+          renderTemplate({
+            template: html`
+              <form @submit="handleSubmit" @keyup="handleKeyUp">
+                <Combobox v-model="value" name="option">
+                  <ComboboxInput />
+                  <ComboboxButton>Trigger</ComboboxButton>
+                  <ComboboxOptions>
+                    <ComboboxOption value="a">Option A</ComboboxOption>
+                    <ComboboxOption value="b">Option B</ComboboxOption>
+                    <ComboboxOption value="c">Option C</ComboboxOption>
+                  </ComboboxOptions>
+                </Combobox>
+              </form>
+            `,
+            setup() {
+              let value = ref('b')
+              return {
+                value,
+                handleKeyUp(event: KeyboardEvent) {
+                  // JSDom doesn't automatically submit the form but if we can
+                  // catch an `Enter` event, we can assume it was a submit.
+                  if (event.key === 'Enter') (event.currentTarget as HTMLFormElement).submit()
+                },
+                handleSubmit(event: SubmitEvent) {
+                  event.preventDefault()
+                  submits([...new FormData(event.currentTarget as HTMLFormElement).entries()])
+                },
+              }
+            },
+          })
+
+          // Focus the input field
+          getComboboxInput()?.focus()
+          assertActiveElement(getComboboxInput())
+
+          // Press enter (which should submit the form)
+          await press(Keys.Enter)
+
+          // Verify the form was submitted
+          expect(submits).toHaveBeenCalledTimes(1)
+          expect(submits).toHaveBeenCalledWith([['option', 'b']])
+        })
+      )
     })
 
     describe('`Tab` key', () => {

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

@@ -1488,6 +1488,42 @@ describe('Keyboard interactions', () => {
       expect(submits).toHaveBeenCalledTimes(1)
       expect(submits).toHaveBeenCalledWith([['option', 'bob']])
     })
+
+    it('should submit the form on `Enter` (when no submit button was found)', async () => {
+      let submits = jest.fn()
+
+      renderTemplate({
+        template: html`
+          <form @submit="handleSubmit">
+            <RadioGroup v-model="value" name="option">
+              <RadioGroupOption value="alice">Alice</RadioGroupOption>
+              <RadioGroupOption value="bob">Bob</RadioGroupOption>
+              <RadioGroupOption value="charlie">Charlie</RadioGroupOption>
+            </RadioGroup>
+          </form>
+        `,
+        setup() {
+          let value = ref('bob')
+          return {
+            value,
+            handleSubmit(event: KeyboardEvent) {
+              event.preventDefault()
+              submits([...new FormData(event.currentTarget as HTMLFormElement).entries()])
+            },
+          }
+        },
+      })
+
+      // Focus the RadioGroup
+      await press(Keys.Tab)
+
+      // Press enter (which should submit the form)
+      await press(Keys.Enter)
+
+      // Verify the form was submitted
+      expect(submits).toHaveBeenCalledTimes(1)
+      expect(submits).toHaveBeenCalledWith([['option', 'bob']])
+    })
   })
 })
 

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

@@ -589,6 +589,38 @@ describe('Keyboard interactions', () => {
       expect(submits).toHaveBeenCalledTimes(1)
       expect(submits).toHaveBeenCalledWith([['option', 'on']])
     })
+
+    it('should submit the form on `Enter` (when no submit button was found)', async () => {
+      let submits = jest.fn()
+      renderTemplate({
+        template: html`
+          <form @submit="handleSubmit">
+            <Switch v-model="checked" name="option" />
+          </form>
+        `,
+        setup() {
+          let checked = ref(true)
+          return {
+            checked,
+            handleSubmit(event: KeyboardEvent) {
+              event.preventDefault()
+              submits([...new FormData(event.currentTarget as HTMLFormElement).entries()])
+            },
+          }
+        },
+      })
+
+      // Focus the input field
+      getSwitch()?.focus()
+      assertActiveElement(getSwitch())
+
+      // Press enter (which should submit the form)
+      await press(Keys.Enter)
+
+      // Verify the form was submitted
+      expect(submits).toHaveBeenCalledTimes(1)
+      expect(submits).toHaveBeenCalledWith([['option', 'on']])
+    })
   })
 
   describe('`Tab` key', () => {

packages/@headlessui-vue/src/utils/form.ts

@@ -54,4 +54,9 @@ export function attemptSubmit(element: HTMLElement) {
       return
     }
   }
+
+  // If we get here, then there is no submit button in the form. We can use the
+  // `form.requestSubmit()` function to submit the form instead. We cannot use `form.submit()`
+  // because then the `submit` event won't be fired and `onSubmit` listeners won't be fired.
+  form.requestSubmit()
 }