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
miljodir · Oct 4, 2024 · c3d8420 · c3d8420
1 parent 6f553e8
commit c3d8420
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 12 deletions.
diff --git 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
@@ -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
@@ -6,13 +6,17 @@ 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);
 
     if (e.key === 'Escape') {
       const element = focusableElements?.[0];
       element?.focus();
+      if (elementType === 'autocomplete') {
+        element?.blur();
+      }
       document.removeEventListener('keydown', onKeyDown, false);
       setOpen(false);
     }