fix(AutoComplete): fix autocomplete behavior in forms by preventing s…

…ubmissions on Enter keypress (#1350)
livechat · Sep 17, 2024 · a2c12ca · a2c12ca
1 parent f6ba4ab
commit a2c12ca
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/packages/react-components/src/components/AutoComplete/AutoComplete.stories.tsx b/packages/react-components/src/components/AutoComplete/AutoComplete.stories.tsx
@@ -103,13 +103,25 @@ export const Examples = (): React.ReactElement => {
           single
         />
       </StoryDescriptor>
+
       <StoryDescriptor title="Don't hide exact matches">
         <AutoComplete
           options={['Option 1']}
           placeholder={placeholderText}
           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
@@ -77,9 +77,13 @@ export const AutoComplete = React.forwardRef<
     };
 
     const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-      handleVisibilityChange(true);
-      if (virtualItemRef.current?.id && event.key === 'Enter') {
+      const isEnterKey = event.key === 'Enter';
+      if (virtualItemRef.current?.id && isEnterKey) {
         handleAutoComplete([{ key: virtualItemRef.current?.id }]);
+        event.preventDefault();
+      }
+      if (!isEnterKey) {
+        handleVisibilityChange(true);
       }
       inputProps.onKeyDown?.(event);
     };