Merge pull request #1301 from core-ds/fix/select-click-scroll

fix(select): fixed scroll on item click with search enabled on Safari
core-ds · Jul 19, 2024 · 60aed8d · 60aed8d
2 parents 90d7f56 + 49ff4b9
commit 60aed8d
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/.changeset/plenty-peaches-shop.md b/.changeset/plenty-peaches-shop.md
@@ -0,0 +1,5 @@
+---
+'@alfalab/core-components-select': patch
+---
+
+Исправлен скролл при клике на вариант выбора в браузере Safari
diff --git a/packages/select/src/components/base-select/Component.tsx b/packages/select/src/components/base-select/Component.tsx
@@ -50,10 +50,10 @@ const itemToString = (option: OptionShape | null) => (option ? option.key : '');
 
 const isItemDisabled = (option: OptionShape | null) => Boolean(option?.disabled);
 
-export const BaseSelect = forwardRef(
+export const BaseSelect = forwardRef<unknown, ComponentProps>(
     // TODO: 😭
     // eslint-disable-next-line complexity
-    (props: ComponentProps, ref) => {
+    (props, ref) => {
         const {
             dataTestId,
             className,
@@ -108,7 +108,7 @@ export const BaseSelect = forwardRef(
             bottomSheetProps,
             limitDynamicOptionGroupSize,
         } = props;
-
+        const shouldSearchBlurRef = useRef(true);
         const rootRef = useRef<HTMLDivElement>(null);
         const fieldRef = useRef<HTMLInputElement>(null);
         const listRef = useRef<HTMLDivElement>(null);
@@ -436,6 +436,13 @@ export const BaseSelect = forwardRef(
                 index,
                 item: option,
                 onMouseDown: (event: MouseEvent) => event.preventDefault(),
+                onClick: () => {
+                    if (view === 'mobile' || !showSearch || multiple) return;
+                    shouldSearchBlurRef.current = false;
+                    searchRef.current?.blur();
+                    shouldSearchBlurRef.current = true;
+                    fieldRef.current?.focus();
+                },
             }),
             multiple,
             index,
@@ -533,6 +540,7 @@ export const BaseSelect = forwardRef(
             };
 
             const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
+                if (!shouldSearchBlurRef.current) return;
                 searchProps.componentProps?.onBlur?.(event);
                 handleFieldBlur(event);
             };