fix(Select): keyboard behavior on mobile

gravity-ui · Jan 31, 2025 · 73c056a · 73c056a
1 parent 4aec513
commit 73c056a
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
@@ -164,7 +164,10 @@ export const Select = React.forwardRef<HTMLButtonElement, SelectProps>(function
 
             if (multiple) {
                 const activeItemIndex = listRef?.current?.getActiveItem();
-                filterRef.current?.focus();
+
+                if (!mobile) {
+                    filterRef.current?.focus();
+                }
 
                 if (typeof activeItemIndex === 'number') {
                     // prevent item deactivation in case of multiple selection
@@ -178,7 +181,7 @@ export const Select = React.forwardRef<HTMLButtonElement, SelectProps>(function
 
             handleSelection(option);
         },
-        [handleSelection, multiple],
+        [handleSelection, mobile, multiple],
     );
 
     const handleControlKeyDown = React.useCallback(

diff --git a/src/hooks/useFocusWithin/useFocusWithin.ts b/src/hooks/useFocusWithin/useFocusWithin.ts
@@ -1,5 +1,7 @@
 import * as React from 'react';
 
+import {useMobile} from '../../components/mobile';
+
 import {SyntheticFocusEvent} from './SyntheticFocusEvent';
 import {useSyntheticBlurEvent} from './useSyntheticBlurEvent';
 
@@ -144,6 +146,8 @@ function useFocusEvents({
     const capturedRef = React.useRef(false);
     const targetRef = React.useRef<EventTarget | null>(null);
 
+    const mobile = useMobile();
+
     React.useEffect(() => {
         if (isDisabled) {
             return undefined;
@@ -186,15 +190,15 @@ function useFocusEvents({
         (event: React.FocusEvent) => {
             if (
                 document.activeElement !== event.target &&
-                (event.relatedTarget === null ||
+                ((!mobile && event.relatedTarget === null) ||
                     event.relatedTarget === document.body ||
                     event.relatedTarget === (document as EventTarget))
             ) {
                 onBlur(event);
                 targetRef.current = null;
             }
         },
-        [onBlur],
+        [isMobile, onBlur],
     );
 
     const onSyntheticFocus = useSyntheticBlurEvent(onBlur);