From c3d8420668d7cb046c568ab111a8b9b514fed255 Mon Sep 17 00:00:00 2001
From: Aurora Scharff <66901228+aurorascharff@users.noreply.github.com>
Date: Fri, 4 Oct 2024 10:00:51 +0200
Subject: [PATCH] fix: When escaping inside an autocomplete, the displayvalue
 was shown while input was focused (#179)

* fix: When escaping or pressing enter inside autocompletes, displayvalue was shown and user could no longer type

* Update

* Update package.json

* Remove handler for opening/closing the autocompletes

* Update
---
 packages/react/src/formElements/MdAutocomplete.tsx      | 7 +------
 packages/react/src/formElements/MdMultiAutocomplete.tsx | 7 +------
 packages/react/src/hooks/useDropdown.ts                 | 4 ++++
 3 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/packages/react/src/formElements/MdAutocomplete.tsx b/packages/react/src/formElements/MdAutocomplete.tsx
index e04cdc1a..7444abc4 100644
--- a/packages/react/src/formElements/MdAutocomplete.tsx
+++ b/packages/react/src/formElements/MdAutocomplete.tsx
@@ -72,7 +72,7 @@ const MdAutocomplete = React.forwardRef<HTMLInputElement, MdAutocompleteProps>(
     const [autocompleteValue, setAutocompleteValue] = useState('');
     const [results, setResults] = useState<MdAutocompleteOption[]>([]);
     const dropdownRef = useRef<HTMLDivElement>(null);
-    useDropdown(dropdownRef, open, setOpen);
+    useDropdown(dropdownRef, open, setOpen, 'autocomplete');
 
     const autocompleteId = id && id !== '' ? id : uuidv4();
 
@@ -202,11 +202,6 @@ const MdAutocomplete = React.forwardRef<HTMLInputElement, MdAutocompleteProps>(
             className={inputClassNames}
             value={open ? autocompleteValue : displayValue}
             tabIndex={0}
-            onKeyDown={e => {
-              if (e.key === 'Enter') {
-                setOpen(!open);
-              }
-            }}
             onChange={e => {
               setAutocompleteValue(e.target.value);
               if (e.target.value && e.target.value !== '') {
diff --git a/packages/react/src/formElements/MdMultiAutocomplete.tsx b/packages/react/src/formElements/MdMultiAutocomplete.tsx
index efc5a8e7..65189491 100644
--- a/packages/react/src/formElements/MdMultiAutocomplete.tsx
+++ b/packages/react/src/formElements/MdMultiAutocomplete.tsx
@@ -69,7 +69,7 @@ const MdMultiAutocomplete = React.forwardRef<HTMLInputElement, MdMultiAutocomple
     const [autocompleteValue, setAutocompleteValue] = useState('');
     const [results, setResults] = useState<MdMultiAutocompleteOption[]>([]);
     const dropdownRef = useRef<HTMLDivElement>(null);
-    useDropdown(dropdownRef, open, setOpen);
+    useDropdown(dropdownRef, open, setOpen, 'autocomplete');
 
     const multiAutocompleteId = id && id !== '' ? id : uuidv4();
 
@@ -225,11 +225,6 @@ const MdMultiAutocomplete = React.forwardRef<HTMLInputElement, MdMultiAutocomple
             className={inputClassNames}
             value={open ? autocompleteValue : displayValue}
             tabIndex={0}
-            onKeyDown={e => {
-              if (e.key === 'Enter') {
-                setOpen(!open);
-              }
-            }}
             onChange={e => {
               setAutocompleteValue(e.target.value);
               if (e.target.value && e.target.value !== '') {
diff --git a/packages/react/src/hooks/useDropdown.ts b/packages/react/src/hooks/useDropdown.ts
index 09c607fd..ce8f73c0 100644
--- a/packages/react/src/hooks/useDropdown.ts
+++ b/packages/react/src/hooks/useDropdown.ts
@@ -6,6 +6,7 @@ export default function useDropdown(
   ref: React.RefObject<HTMLDivElement>,
   open: boolean,
   setOpen: (_open: boolean) => void,
+  elementType?: 'autocomplete' | 'select',
 ) {
   const onKeyDown = useCallback((e: KeyboardEvent) => {
     const focusableElements = ref.current?.querySelectorAll<HTMLElement>(focusableHtmlElements);
@@ -13,6 +14,9 @@ export default function useDropdown(
     if (e.key === 'Escape') {
       const element = focusableElements?.[0];
       element?.focus();
+      if (elementType === 'autocomplete') {
+        element?.blur();
+      }
       document.removeEventListener('keydown', onKeyDown, false);
       setOpen(false);
     }