From 280d13db9f764ea6fadce25751ec388d100f9b4b Mon Sep 17 00:00:00 2001
From: Ash <maybork@pm.me>
Date: Mon, 16 Sep 2024 15:51:42 +0200
Subject: [PATCH 1/3] fix(AutoComplete): fix autocomplete behavior in forms

---
 .../components/AutoComplete/AutoComplete.stories.tsx | 12 ++++++++++++
 .../src/components/AutoComplete/AutoComplete.tsx     |  1 +
 2 files changed, 13 insertions(+)

diff --git a/packages/react-components/src/components/AutoComplete/AutoComplete.stories.tsx b/packages/react-components/src/components/AutoComplete/AutoComplete.stories.tsx
index 576fcd1a3..1ea0e5f1a 100644
--- a/packages/react-components/src/components/AutoComplete/AutoComplete.stories.tsx
+++ b/packages/react-components/src/components/AutoComplete/AutoComplete.stories.tsx
@@ -103,6 +103,7 @@ export const Examples = (): React.ReactElement => {
           single
         />
       </StoryDescriptor>
+
       <StoryDescriptor title="Don't hide exact matches">
         <AutoComplete
           options={['Option 1']}
@@ -110,6 +111,17 @@ export const Examples = (): React.ReactElement => {
           hideIfExactMatch={false}
         />
       </StoryDescriptor>
+      <StoryDescriptor title="In a form">
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            // eslint-disable-next-line no-console
+            console.log('submit');
+          }}
+        >
+          <AutoComplete options={options} placeholder={placeholderText} />
+        </form>
+      </StoryDescriptor>
     </>
   );
 };
diff --git a/packages/react-components/src/components/AutoComplete/AutoComplete.tsx b/packages/react-components/src/components/AutoComplete/AutoComplete.tsx
index 9eef55fbc..728d298d7 100644
--- a/packages/react-components/src/components/AutoComplete/AutoComplete.tsx
+++ b/packages/react-components/src/components/AutoComplete/AutoComplete.tsx
@@ -80,6 +80,7 @@ export const AutoComplete = React.forwardRef<
       handleVisibilityChange(true);
       if (virtualItemRef.current?.id && event.key === 'Enter') {
         handleAutoComplete([{ key: virtualItemRef.current?.id }]);
+        event.preventDefault();
       }
       inputProps.onKeyDown?.(event);
     };

From 516a40494a2f71b65c6666ddbba128258cced287 Mon Sep 17 00:00:00 2001
From: Ash <maybork@pm.me>
Date: Mon, 16 Sep 2024 15:55:21 +0200
Subject: [PATCH 2/3] fix(AutoComplete): only open the picker when not pressing
 Enter

---
 .../src/components/AutoComplete/AutoComplete.tsx               | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react-components/src/components/AutoComplete/AutoComplete.tsx b/packages/react-components/src/components/AutoComplete/AutoComplete.tsx
index 728d298d7..55023dcbb 100644
--- a/packages/react-components/src/components/AutoComplete/AutoComplete.tsx
+++ b/packages/react-components/src/components/AutoComplete/AutoComplete.tsx
@@ -77,10 +77,11 @@ export const AutoComplete = React.forwardRef<
     };
 
     const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-      handleVisibilityChange(true);
       if (virtualItemRef.current?.id && event.key === 'Enter') {
         handleAutoComplete([{ key: virtualItemRef.current?.id }]);
         event.preventDefault();
+      } else {
+        handleVisibilityChange(true);
       }
       inputProps.onKeyDown?.(event);
     };

From 7e9649f2568d085fe47a10171d9d677df6de818e Mon Sep 17 00:00:00 2001
From: Ash <maybork@pm.me>
Date: Mon, 16 Sep 2024 16:04:12 +0200
Subject: [PATCH 3/3] fix(AutoComplete): only open the picker when not pressing
 Enter

---
 .../src/components/AutoComplete/AutoComplete.tsx            | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/react-components/src/components/AutoComplete/AutoComplete.tsx b/packages/react-components/src/components/AutoComplete/AutoComplete.tsx
index 55023dcbb..2e6fa2d4a 100644
--- a/packages/react-components/src/components/AutoComplete/AutoComplete.tsx
+++ b/packages/react-components/src/components/AutoComplete/AutoComplete.tsx
@@ -77,10 +77,12 @@ export const AutoComplete = React.forwardRef<
     };
 
     const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-      if (virtualItemRef.current?.id && event.key === 'Enter') {
+      const isEnterKey = event.key === 'Enter';
+      if (virtualItemRef.current?.id && isEnterKey) {
         handleAutoComplete([{ key: virtualItemRef.current?.id }]);
         event.preventDefault();
-      } else {
+      }
+      if (!isEnterKey) {
         handleVisibilityChange(true);
       }
       inputProps.onKeyDown?.(event);