fix: Allow submit button to be outside of the form for implicit submi…

…ssion (#21279)

Co-authored-by: Zach Bloomquist <github@chary.us>
Co-authored-by: Zach Bloomquist <git@chary.us>

packages/driver/cypress/fixtures/dom.html

@@ -323,6 +323,12 @@
           <button type="submit">submit me</button>
         </form>
 
+        <form id="multiple-inputs-and-button-submit.outside-form">
+          <input name="fname" />
+          <input name="lname" />
+        </form>
+        <button form="multiple-inputs-and-button-submit.outside-form" type="submit">submit me</button>
+
         <form id="multiple-inputs-and-reset-and-submit-buttons">
           <input name="fname" />
           <input name="lname" />

packages/driver/cypress/integration/commands/actions/type_special_chars_spec.js

@@ -1486,6 +1486,16 @@ describe('src/cy/commands/actions/type - #type special chars', () => {
         cy.get('#multiple-inputs-and-button-submit input:first').type('foo{enter}')
       })
 
+      it('triggers form submit when the submit button is outside of the form', function (done) {
+        this.$forms.find('[id="multiple-inputs-and-button-submit.outside-form"]').submit((e) => {
+          e.preventDefault()
+
+          done()
+        })
+
+        cy.get('[id="multiple-inputs-and-button-submit.outside-form"] input:first').type('foo{enter}')
+      })
+
       it('causes click event on the button[type=submit]', function (done) {
         this.$forms.find('#multiple-inputs-and-button-submit button[type=submit]').click((e) => {
           e.preventDefault()

packages/driver/src/cy/commands/actions/type.ts

@@ -173,7 +173,15 @@ export default function (Commands, Cypress, cy, state, config) {
     const win = state('window')
 
     const getDefaultButtons = (form) => {
-      return form.find('input, button').filter((__, el) => {
+      const formId = CSS.escape(form.attr('id'))
+      const nestedButtons = form.find('input, button')
+
+      const possibleDefaultButtons: JQuery<any> = formId ? $dom.wrap(_.uniq([
+        ...nestedButtons,
+        ...$dom.query('body', form.prop('ownerDocument')).find(`input[form="${formId}"], button[form="${formId}"]`),
+      ])) : nestedButtons
+
+      return possibleDefaultButtons.filter((__, el) => {
         const $el = $dom.wrap(el)
 
         return (