From 971d56555651b0f6b99a36000b76d1c22f125703 Mon Sep 17 00:00:00 2001
From: Evgeny Alaev <alaev89@yandex-team.ru>
Date: Fri, 17 Nov 2023 01:15:02 +0300
Subject: [PATCH] fix(Select): fix focus state on control click in Safari

---
 .../components/SelectControl/SelectControl.tsx  | 17 +++++++++++++++--
 src/components/Select/types.ts                  |  2 +-
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/Select/components/SelectControl/SelectControl.tsx b/src/components/Select/components/SelectControl/SelectControl.tsx
index 09d361cf9b..873937dbc2 100644
--- 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
index 3aed92c62a..9c589fe9a7 100644
--- 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;