Merge branch 'next' into dialog-width-caption-line-clamp-737

src/components/input/bl-input.stories.mdx

@@ -354,6 +354,16 @@ When you run this example and submit the form, you'll see key/value pairs of the
 
 <bl-alert icon>If user presses `Enter` key in an input inside a form, this will trigger submit of the form. This behaviour mimics the native input behaviour.</bl-alert>
 
+If you want to prevent input to submit the form, you can listen `keydown` event and prevent it's default behaviour.
+
+```js
+document.querySelector('bl-input').addEventListener('keydown', (event) => {
+  if (event.code === "Enter") {
+    event.preventDefault();
+  }
+});
+```
+
 ## Input Masking
 
 Input masking is essential in user interfaces that require formatted entries such as phone numbers and dates, ensuring consistent and structured user input.

src/components/input/bl-input.test.ts

@@ -351,6 +351,35 @@ describe("bl-input", () => {
 
       expect(ev).to.exist;
     });
+
+    it("should not submit if keydown event is prevented", async () => {
+      const form = await fixture<HTMLFormElement>(html`<form novalidate>
+        <bl-input name="user" value="name"></bl-input>
+        <button type="submit">Submit</button>
+      </form>`);
+
+      const blInput = form.querySelector<BlInput>("bl-input");
+
+      blInput?.addEventListener("keydown", e => e.preventDefault());
+
+      await elementUpdated(form);
+
+      let eventFired = false;
+
+      form.addEventListener("submit", e => {
+        e.preventDefault();
+        eventFired = true;
+      });
+
+      const enterEvent = new KeyboardEvent("keydown", {
+        code: "Enter",
+        cancelable: true,
+      });
+
+      blInput?.dispatchEvent(enterEvent);
+
+      expect(eventFired).to.be.false;
+    });
   });
 
   describe("loading state and custom icons", () => {

src/components/input/bl-input.ts

@@ -234,7 +234,11 @@ export default class BlInput extends FormControlMixin(LitElement) {
 
   private onKeydown = (event: KeyboardEvent): void => {
     if (event.code === "Enter" && this.form) {
-      submit(this.form);
+      setTimeout(() => {
+        if (!event.defaultPrevented) {
+          submit(this.form);
+        }
+      });
     }
   };