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

gravity-ui · Nov 16, 2023 · e804e29 · e804e29
1 parent e76fd7c
commit e804e29
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/src/components/Select/components/SelectControl/SelectControl.tsx b/src/components/Select/components/SelectControl/SelectControl.tsx
@@ -85,6 +85,19 @@ export const SelectControl = React.forwardRef<HTMLButtonElement, ControlProps>((
         error: Boolean(error),
     };
 
+    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);
     }, []);
@@ -118,7 +131,7 @@ export const SelectControl = React.forwardRef<HTMLButtonElement, ControlProps>((
             {
                 onKeyDown,
                 onClear: clearValue,
-                onClick: toggleOpen,
+                onClick: handleControlClick,
                 renderClear: (arg) => renderClearIcon(arg),
                 ref,
                 open: Boolean(open),
@@ -147,7 +160,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
@@ -12,7 +12,8 @@ export type SelectRenderClearArgs = {
 
 export type SelectRenderControlProps = {
     onClear: () => void;
-    onClick: () => void;
+    // FIXME: change "e" property to required in the next major
+    onClick: (e?: React.MouseEvent<HTMLElement>) => void;
     onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;
     renderClear?: (args: SelectRenderClearArgs) => React.ReactNode;
     ref: React.Ref<HTMLElement>;