From 7b230b0e0403f5c32e9117d291e51c630e4510b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Murat=20=C3=87orlu?= <murat.corlu@trendyol.com>
Date: Fri, 8 Sep 2023 10:06:44 +0200
Subject: [PATCH 1/2] feat(input): prevent enter to submit form

---
 src/components/input/bl-input.stories.mdx | 10 ++++++++
 src/components/input/bl-input.test.ts     | 29 +++++++++++++++++++++++
 src/components/input/bl-input.ts          |  2 +-
 3 files changed, 40 insertions(+), 1 deletion(-)

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
 
 <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.
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<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", () => {
diff --git a/src/components/input/bl-input.ts b/src/components/input/bl-input.ts
index 9ddb7d47..8f0725d4 100644
--- a/src/components/input/bl-input.ts
+++ b/src/components/input/bl-input.ts
@@ -233,7 +233,7 @@ export default class BlInput extends FormControlMixin(LitElement) {
   }
 
   private onKeydown = (event: KeyboardEvent): void => {
-    if (event.code === "Enter" && this.form) {
+    if (event.code === "Enter" && this.form && event.defaultPrevented === false) {
       submit(this.form);
     }
   };

From a6eef590a658a5f79c2f7c7dfaf43adcbedef33d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Enes=20Y=C4=B1ld=C4=B1r=C4=B1m?= <enes5519@gmail.com>
Date: Mon, 5 Aug 2024 14:02:30 +0300
Subject: [PATCH 2/2] fix: add set timeout to ensure latest listening

---
 src/components/input/bl-input.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/input/bl-input.ts b/src/components/input/bl-input.ts
index 8f0725d4..3b814915 100644
--- a/src/components/input/bl-input.ts
+++ b/src/components/input/bl-input.ts
@@ -233,8 +233,12 @@ export default class BlInput extends FormControlMixin(LitElement) {
   }
 
   private onKeydown = (event: KeyboardEvent): void => {
-    if (event.code === "Enter" && this.form && event.defaultPrevented === false) {
-      submit(this.form);
+    if (event.code === "Enter" && this.form) {
+      setTimeout(() => {
+        if (!event.defaultPrevented) {
+          submit(this.form);
+        }
+      });
     }
   };