From 3d8dd415a5a181f8fa9530beb314dd73b1757f81 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 2 Dec 2020 17:17:34 -0500
Subject: [PATCH] fixes #277

---
 docs/getting-started/changelog.md | 1 +
 src/components/form/form.tsx      | 8 ++++++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/docs/getting-started/changelog.md b/docs/getting-started/changelog.md
index 9d083ff8d..b66ecad3e 100644
--- a/docs/getting-started/changelog.md
+++ b/docs/getting-started/changelog.md
@@ -13,6 +13,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Added `--track-color`, `--indicator-color`, and `--label-color` to `sl-progress-bar` [#276](https://github.com/shoelace-style/shoelace/issues/276)
 - Fixed a bug where `sl-menu-item` color variable was incorrect [#272](https://github.com/shoelace-style/shoelace/issues/272)
 - Fixed a bug where `sl-dialog` and `sl-drawer` would emit the `sl-hide` event twice [#275](https://github.com/shoelace-style/shoelace/issues/275)
+- Fixed a bug where calling `event.preventDefault()` on certain form elements wouldn't prevent `sl-form` from submitting [#277](https://github.com/shoelace-style/shoelace/issues/277)
 
 ## 2.0.0-beta.23
 
diff --git a/src/components/form/form.tsx b/src/components/form/form.tsx
index 931394a1d..e01f3d212 100644
--- a/src/components/form/form.tsx
+++ b/src/components/form/form.tsx
@@ -75,7 +75,11 @@ export class Form {
         },
         keyDown: event => {
           const target = event.target as HTMLInputElement;
-          if (event.key === 'Enter' && !['checkbox', 'file', 'radio'].includes(target.type)) {
+          if (
+            event.key === 'Enter' &&
+            !event.defaultPrevented &&
+            !['checkbox', 'file', 'radio'].includes(target.type)
+          ) {
             this.submit();
           }
         }
@@ -123,7 +127,7 @@ export class Form {
         serialize: (el: HTMLSlInputElement, formData) =>
           el.name && !el.disabled ? formData.append(el.name, el.value) : null,
         keyDown: event => {
-          if (event.key === 'Enter') {
+          if (event.key === 'Enter' && !event.defaultPrevented) {
             this.submit();
           }
         }