From 2b6c98353e8d7f87179bf0e92601018ab2ff50cd Mon Sep 17 00:00:00 2001
From: skl23 <struan.kerr-liddell@sky.uk>
Date: Sat, 7 Jun 2025 00:03:51 +0100
Subject: [PATCH] fix: submit form with external submit button when user clicks
 enter (#1220)

---
 src/event/behavior/keypress.ts   | 11 ++++++++---
 tests/event/behavior/keypress.ts | 34 ++++++++++++++++++++++++++++++--
 2 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/src/event/behavior/keypress.ts b/src/event/behavior/keypress.ts
index dd417ec3..11b6e541 100644
--- a/src/event/behavior/keypress.ts
+++ b/src/event/behavior/keypress.ts
@@ -15,9 +15,14 @@ behavior.keypress = (event, target, instance) => {
       }
     } else if (isElementType(target, 'input')) {
       const form = target.form
-      const submit = form?.querySelector(
-        'input[type="submit"], button:not([type]), button[type="submit"]',
-      )
+      const submit =
+        form?.querySelector(
+          'input[type="submit"], button:not([type]), button[type="submit"]',
+        ) ??
+        (form?.id &&
+          document.querySelector(
+            `input[form="${form.id}"][type="submit"], button[form="${form.id}"]:not([type]), button[form="${form?.id}"][type="submit"]`,
+          ))
       if (submit) {
         return () => instance.dispatchUIEvent(submit, 'click')
       } else if (
diff --git a/tests/event/behavior/keypress.ts b/tests/event/behavior/keypress.ts
index c4007bae..df57ddb1 100644
--- a/tests/event/behavior/keypress.ts
+++ b/tests/event/behavior/keypress.ts
@@ -127,9 +127,9 @@ cases(
 cases(
   'submit form on [Enter]',
   async ({html, click, submit}) => {
-    const {eventWasFired, xpathNode} = render(html, {focus: 'form/*[2]'})
+    const {eventWasFired, xpathNode} = render(html, {focus: '//form/*[2]'})
 
-    setupInstance().dispatchUIEvent(xpathNode('form/*[2]'), 'keypress', {
+    setupInstance().dispatchUIEvent(xpathNode('//form/*[2]'), 'keypress', {
       key: 'Enter',
     })
 
@@ -142,21 +142,51 @@ cases(
       click: true,
       submit: true,
     },
+    'with `<input type="submit"/>` outside the form': {
+      html: `<div><form id="test-form"><input/><input/></form><input type="submit" form="test-form"/></div>`,
+      click: true,
+      submit: true,
+    },
+    'with `<input type="submit"/>` outside the form not linked by id': {
+      html: `<div><form><input/><input/></form><input type="submit" form="test-form"/></div>`,
+      click: false,
+      submit: false,
+    },
     'with `<button/>`': {
       html: `<form><input/><input/><button/></form>`,
       click: true,
       submit: true,
     },
+    'with `<button/>` outside the form': {
+      html: `<div><form id="test-form"><input/><input/></form><button form="test-form"/></div>`,
+      click: true,
+      submit: true,
+    },
     'with `<button type="submit"/>`': {
       html: `<form><input/><input/><button type="submit"/></form>`,
       click: true,
       submit: true,
     },
+    'with `<button type="submit"/>` outside the form': {
+      html: `<div><form id="test-form"><input/><input/></form><button type="submit" form="test-form"/></div>`,
+      click: true,
+      submit: true,
+    },
     'with `<button type="button"/>`': {
       html: `<form><input/><input/><button type="button"/></form>`,
       click: false,
       submit: false,
     },
+    'with `<button type="button">` outside the form': {
+      html: `<div><form id="test-form"><input/><input/></form><button type="button" form="test-form"/></div>`,
+      click: false,
+      submit: false,
+    },
+    'with `<button/>` outside the form not linked to the form': {
+      html: `<div><form id="test-form"><input/><input/></form><button /></div>`,
+      click: false,
+      submit: false,
+    },
     'on checkbox': {
       html: `<form><input/><input type="checkbox"/><button type="submit"/></form>`,
       click: true,