From aa6f3b8039495ac37ced4ac581129a020ba66fa4 Mon Sep 17 00:00:00 2001
From: Sam Kvale <kvalesam@gmail.com>
Date: Thu, 5 May 2022 13:09:37 -0500
Subject: [PATCH] fix: Allow submit button to be outside of the form for
 implicit submission (#21279)

Co-authored-by: Zach Bloomquist <github@chary.us>
Co-authored-by: Zach Bloomquist <git@chary.us>
---
 packages/driver/cypress/fixtures/dom.html              |  6 ++++++
 .../commands/actions/type_special_chars_spec.js        | 10 ++++++++++
 packages/driver/src/cy/commands/actions/type.ts        | 10 +++++++++-
 3 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/packages/driver/cypress/fixtures/dom.html b/packages/driver/cypress/fixtures/dom.html
index 6347924ceccf..819fc05167a9 100644
--- a/packages/driver/cypress/fixtures/dom.html
+++ b/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" />
diff --git a/packages/driver/cypress/integration/commands/actions/type_special_chars_spec.js b/packages/driver/cypress/integration/commands/actions/type_special_chars_spec.js
index 6f0b40e60b57..4296e08897ee 100644
--- a/packages/driver/cypress/integration/commands/actions/type_special_chars_spec.js
+++ b/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()
diff --git a/packages/driver/src/cy/commands/actions/type.ts b/packages/driver/src/cy/commands/actions/type.ts
index a168ebf88160..7d4753e79794 100644
--- a/packages/driver/src/cy/commands/actions/type.ts
+++ b/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 (