diff --git a/src/components/input/bl-input.stories.mdx b/src/components/input/bl-input.stories.mdx
index cfa0e7f3..032b2e33 100644
--- a/src/components/input/bl-input.stories.mdx
+++ b/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
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.
+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.
diff --git a/src/components/input/bl-input.test.ts b/src/components/input/bl-input.test.ts
index 0afbb6fb..697f1033 100644
--- a/src/components/input/bl-input.test.ts
+++ b/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(html``);
+
+ const blInput = form.querySelector("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", () => {
diff --git a/src/components/input/bl-input.ts b/src/components/input/bl-input.ts
index 9ddb7d47..3b814915 100644
--- a/src/components/input/bl-input.ts
+++ b/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);
+ }
+ });
}
};