fix(Select): fix focus state on control click in Safari (#1132)

gravity-ui · May 7, 2024 · 80730cc · 80730cc
1 parent c7b0888
commit 80730cc
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/src/components/Select/components/SelectControl/SelectControl.tsx b/src/components/Select/components/SelectControl/SelectControl.tsx
@@ -99,6 +99,19 @@ export const SelectControl = React.forwardRef<HTMLButtonElement, ControlProps>((
         error: isErrorVisible,
     };
 
+    const handleControlClick = React.useCallback(
+        (e?: React.MouseEvent<HTMLElement>) => {
+            // Fix for Safari
+            // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#clicking_and_focus
+            if (e && e.currentTarget !== document.activeElement && 'focus' in e.currentTarget) {
+                (e.currentTarget as HTMLButtonElement).focus();
+            }
+
+            toggleOpen();
+        },
+        [toggleOpen],
+    );
+
     const disableButtonAnimation = React.useCallback(() => {
         setIsDisabledButtonAnimation(true);
     }, []);
@@ -143,7 +156,7 @@ export const SelectControl = React.forwardRef<HTMLButtonElement, ControlProps>((
             {
                 onKeyDown,
                 onClear: clearValue,
-                onClick: toggleOpen,
+                onClick: handleControlClick,
                 renderClear: (arg) => renderClearIcon(arg),
                 renderCounter: renderCounterComponent,
                 ref,
@@ -173,7 +186,7 @@ export const SelectControl = React.forwardRef<HTMLButtonElement, ControlProps>((
                     }
                     name={name}
                     disabled={disabled}
-                    onClick={toggleOpen}
+                    onClick={handleControlClick}
                     onKeyDown={onKeyDown}
                     type="button"
                     data-qa={qa}

diff --git a/src/components/Select/types.ts b/src/components/Select/types.ts
@@ -13,7 +13,7 @@ export type SelectRenderClearArgs = {
 
 export type SelectRenderControlProps = {
     onClear: () => void;
-    onClick: () => void;
+    onClick: (e: React.MouseEvent<HTMLElement>) => void;
     onKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;
     renderClear?: (args: SelectRenderClearArgs) => React.ReactNode;
     renderCounter?: () => React.ReactNode;