From 1ddf7c08dc718028204722f413b721565aa18bf8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Murat=20=C3=87orlu?=
 <127687+muratcorlu@users.noreply.github.com>
Date: Thu, 8 Aug 2024 13:07:36 +0200
Subject: [PATCH] feat(input): prevent enter to submit form (#691)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This PR allows preventing `Enter` from submitting the parent form.

Closes #676

---------

Co-authored-by: Enes Yıldırım <enes5519@gmail.com>
---
 src/components/input/bl-input.stories.mdx | 10 ++++++++
 src/components/input/bl-input.test.ts     | 29 +++++++++++++++++++++++
 src/components/input/bl-input.ts          |  6 ++++-
 3 files changed, 44 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..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);
+        }
+      });
     }
   };