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 /> + { hideIfExactMatch={false} /> + +
{ + e.preventDefault(); + // eslint-disable-next-line no-console + console.log('submit'); + }} + > + + +
); }; diff --git a/packages/react-components/src/components/AutoComplete/AutoComplete.tsx b/packages/react-components/src/components/AutoComplete/AutoComplete.tsx index 9eef55fbc..2e6fa2d4a 100644 --- 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) => { - 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); };