fixes #764

docs/resources/changelog.md

@@ -18,6 +18,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Fixed a bug that caused `<sl-dropdown>` and dependent components to add unexpected padding around the panel [#743](https://github.com/shoelace-style/shoelace/issues/743)
 - Fixed a bug that prevented `valueAsDate` and `valueAsNumber` from updating synchronously [#760](https://github.com/shoelace-style/shoelace/issues/760)
 - Fixed a bug that caused `<sl-menu-item>` to load icons from the default library instead of the system library [#765](https://github.com/shoelace-style/shoelace/issues/765)
+- Fixed a bug in `<sl-input>` that prevented a canceled `keydown` event from submitting the containing form when pressing enter [#764](https://github.com/shoelace-style/shoelace/issues/764)
 - Improved behavior of clearable and password toggle buttons in `<sl-input>` and `<sl-select>` [#745](https://github.com/shoelace-style/shoelace/issues/745)
 - Improved performance of `<sl-select>` by caching menu items instead of traversing for them each time
 - Improved drag utility so initial click/touch events can be accepted [#758](https://github.com/shoelace-style/shoelace/issues/758)

src/components/input/input.test.ts

@@ -102,5 +102,25 @@ describe('<sl-input>', () => {
 
       expect(submitHandler).to.have.been.calledOnce;
     });
+
+    it('should prevent submission when pressing enter in an input and canceling the keydown event', async () => {
+      const form = await fixture<HTMLFormElement>(html` <form><sl-input></sl-input></form> `);
+      const input = form.querySelector('sl-input')!;
+      const submitHandler = sinon.spy((event: SubmitEvent) => event.preventDefault());
+      const keydownHandler = sinon.spy((event: KeyboardEvent) => {
+        if (event.key === 'Enter') {
+          event.preventDefault();
+        }
+      });
+
+      form.addEventListener('submit', submitHandler);
+      input.addEventListener('keydown', keydownHandler);
+      input.focus();
+      await sendKeys({ press: 'Enter' });
+      await waitUntil(() => keydownHandler.calledOnce);
+
+      expect(keydownHandler).to.have.been.calledOnce;
+      expect(submitHandler).to.not.have.been.called;
+    });
   });
 });

src/components/input/input.ts

@@ -274,9 +274,14 @@ export default class SlInput extends LitElement {
   handleKeyDown(event: KeyboardEvent) {
     const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
 
-    // Pressing enter when focused on an input should submit the form like a native input
+    // Pressing enter when focused on an input should submit the form like a native input, but we wait a tick before
+    // submitting to allow users to cancel the keydown event if they need to
     if (event.key === 'Enter' && !hasModifier) {
-      this.formSubmitController.submit();
+      setTimeout(() => {
+        if (!event.defaultPrevented) {
+          this.formSubmitController.submit();
+        }
+      });
     }
   }