fixes #700

docs/resources/changelog.md

@@ -9,6 +9,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 ## Next
 
 - Added `form`, `formaction`, `formmethod`, `formnovalidate`, and `formtarget` attributes to `<sl-button>` [#699](https://github.com/shoelace-style/shoelace/issues/699)
+- Fixed a bug that prevented forms from submitting when pressing <kbd>Enter</kbd> inside of an `<sl-input>` [#700](https://github.com/shoelace-style/shoelace/issues/700)
 - Improved `autofocus` behavior in Safari for `<sl-dialog>` and `<sl-drawer>` [#693](https://github.com/shoelace-style/shoelace/issues/693)
 - Removed feature detection for `focus({ preventScroll })` since it no longer works in Safari
 - Removed path aliasing and third-party dependencies that it required

src/components/input/input.test.ts

@@ -1,4 +1,6 @@
-import { expect, fixture, html } from '@open-wc/testing';
+import { expect, fixture, html, waitUntil } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+import sinon from 'sinon';
 import type SlInput from './input';
 
 describe('<sl-input>', () => {
@@ -21,7 +23,7 @@ describe('<sl-input>', () => {
     expect(el.invalid).to.be.true;
   });
 
-  it('should be invalid when required and after removing disabled ', async () => {
+  it('should be invalid when required and after removing disabled', async () => {
     const el = await fixture<SlInput>(html` <sl-input disabled required></sl-input> `);
 
     el.disabled = false;
@@ -29,4 +31,17 @@ describe('<sl-input>', () => {
 
     expect(el.invalid).to.be.true;
   });
+
+  it('should submit the form when pressing enter in a form without a submit button', 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());
+
+    form.addEventListener('submit', submitHandler);
+    input.focus();
+    await sendKeys({ press: 'Enter' });
+    await waitUntil(() => submitHandler.calledOnce);
+
+    expect(submitHandler).to.have.been.calledOnce;
+  });
 });

src/components/input/input.ts

@@ -47,7 +47,6 @@ export default class SlInput extends LitElement {
 
   @query('.input__control') input: HTMLInputElement;
 
-  // @ts-expect-error -- Controller is currently unused
   private readonly formSubmitController = new FormSubmitController(this);
   private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');
   private readonly attrId = autoIncrement();
@@ -259,6 +258,13 @@ export default class SlInput extends LitElement {
     this.invalid = true;
   }
 
+  handleKeyDown(event: KeyboardEvent) {
+    // Pressing enter when focused on an input should submit the form like a native input
+    if (event.key === 'Enter') {
+      this.formSubmitController.submit();
+    }
+  }
+
   handlePasswordToggle() {
     this.isPasswordVisible = !this.isPasswordVisible;
   }
@@ -346,6 +352,7 @@ export default class SlInput extends LitElement {
             @change=${this.handleChange}
             @input=${this.handleInput}
             @invalid=${this.handleInvalid}
+            @keydown=${this.handleKeyDown}
             @focus=${this.handleFocus}
             @blur=${this.handleBlur}
           />