fix: handling of focus / blur - select open and close

abelflopes · Jul 10, 2024 · e150c3c · e150c3c
1 parent 042ea2e
commit e150c3c
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 38 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/components/_provisional/src/dropdown/index.tsx b/packages/components/_provisional/src/dropdown/index.tsx
@@ -19,6 +19,8 @@ export interface DropdownProps {
   /** Ref for the root element */
   rootRef?: React.MutableRefObject<HTMLDivElement | null>;
   onClose?: () => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
 }
 
 export const Dropdown = ({
@@ -30,6 +32,8 @@ export const Dropdown = ({
   rootRef,
   children,
   onClose,
+  onFocus,
+  onBlur,
 }: Readonly<DropdownProps>): React.ReactNode => {
   const containerRef = useRef<HTMLElement | null>(null);
   const [internalOpen, setInternalOpen] = useState(open);
@@ -59,8 +63,12 @@ export const Dropdown = ({
                 if (rootRef) rootRef.current = r;
                 containerRef.current = r;
               }}
+              tabIndex={0}
+              role="menu"
               style={style}
-              className={styles.container}>
+              className={styles.container}
+              onFocus={onFocus}
+              onBlur={onBlur}>
               <Card skin="shadowed" spacing="none">
                 <ScrollableContainer
                   horizontal={false}

diff --git a/packages/components/select/src/index.tsx b/packages/components/select/src/index.tsx
@@ -10,8 +10,6 @@ import { getChildrenData, valueAsArray } from "./utils";
 import { type SelectProps, type ChangeHandler, type SelectOptionProps } from "./types";
 import { SelectContext, type SelectContextProps } from "./context";
 
-// TODO: debounced focus / blur handling in trigger + dropdown wrapper
-
 /**
  * Select is a type of input that allows users to choose one or more options from a list of choices.
  * The options are hidden by default and revealed when a user interacts with an element. It shows the currently selected option in its default collapsed state.
@@ -40,6 +38,7 @@ const Select = ({
   const selectRef = useRef<HTMLSelectElement>(null);
   const rootElRef = useRef<HTMLDivElement>(null);
   const dropdownRef = useRef<HTMLDivElement>(null);
+  const blurTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const [internalValue, setInternalValue] = useState(userValue ?? defaultValue);
   const [open, setOpen] = useState(false);
   const [search, setSearch] = useState("");
@@ -77,6 +76,18 @@ const Select = ({
     [selectMultiple],
   );
 
+  const handleFocus = useCallback(() => {
+    if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current);
+    setOpen(true);
+  }, []);
+
+  const handleBlur = useCallback(() => {
+    if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current);
+    blurTimeoutRef.current = setTimeout(() => {
+      setOpen(false);
+    }, 150);
+  }, []);
+
   /**
    * Handle change events trigger by the user
    * Also replicates the event on the native select
@@ -171,15 +182,11 @@ const Select = ({
         tabIndex={0}
         className={classNames(styles.root, styles[`skin_${skin}`], className)}
         onFocus={(e) => {
-          setOpen(true);
+          handleFocus();
           onFocus?.(e);
         }}
         onBlur={(e) => {
-          if (!selectMultiple) {
-            setTimeout(() => {
-              setOpen(false);
-            }, 100);
-          }
+          handleBlur();
           onBlur?.(e);
         }}>
         {selectedValuesList.length > 0 &&
@@ -198,6 +205,8 @@ const Select = ({
         spacing="s"
         rootRef={dropdownRef}
         excludeAutoPosition={["left", "right", "start", "end", "full"]}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
         onClose={() => {
           setOpen(false);
         }}>