fix(Select): keyboard behavior on mobile

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(
@@ -237,9 +240,12 @@ export const Select = React.forwardRef<HTMLButtonElement, SelectProps>(function
         onBlurWithin: React.useCallback(
             (e: React.FocusEvent) => {
                 onBlur?.(e);
-                handleClose();
+
+                if (!mobile) {
+                    handleClose();
+                }
             },
-            [handleClose, onBlur],
+            [handleClose, mobile, onBlur],
         ),
     });
 

src/components/Select/__tests__/Select.filter.test.tsx

@@ -2,7 +2,8 @@ import * as React from 'react';
 
 import userEvent from '@testing-library/user-event';
 
-import {render, screen} from '../../../../test-utils/utils';
+import {fireEvent, render, screen} from '../../../../test-utils/utils';
+import {SheetQa} from '../../../components/Sheet/constants';
 import {TextInput} from '../../controls';
 import {MobileProvider} from '../../mobile';
 import {Select} from '../Select';
@@ -138,7 +139,6 @@ describe('Select filter', () => {
                     filterable
                     onFilterChange={onFilterChange}
                     onClose={onClose}
-                    qa="select"
                     filterPlaceholder="filter"
                 >
                     <Select.Option value="one">One</Select.Option>
@@ -148,13 +148,18 @@ describe('Select filter', () => {
             </MobileProvider>,
         );
 
+        const sheetVeil = screen.getByTestId(SheetQa.VEIL);
+
+        fireEvent.transitionEnd(sheetVeil);
+
         await userEvent.click(screen.getByPlaceholderText('filter'));
         await userEvent.keyboard('test');
 
         expect(onFilterChange).toHaveBeenCalledTimes(4);
         onFilterChange.mockClear();
 
-        await userEvent.click(document.body);
+        await userEvent.click(sheetVeil);
+        fireEvent.transitionEnd(sheetVeil);
         await timeout(400);
 
         expect(onClose).toHaveBeenCalledTimes(1);
@@ -170,7 +175,6 @@ describe('Select filter', () => {
                     filterable
                     onFilterChange={onFilterChange}
                     onClose={onClose}
-                    qa="select"
                     filterPlaceholder="filter"
                 >
                     <Select.Option value="one">One</Select.Option>
@@ -180,13 +184,18 @@ describe('Select filter', () => {
             </MobileProvider>,
         );
 
+        const sheetVeil = screen.getByTestId(SheetQa.VEIL);
+
+        fireEvent.transitionEnd(sheetVeil);
+
         await userEvent.click(screen.getByPlaceholderText('filter'));
         await userEvent.keyboard('test');
 
         expect(onFilterChange).toHaveBeenCalledTimes(4);
         onFilterChange.mockClear();
 
-        await userEvent.click(document.body);
+        await userEvent.click(sheetVeil);
+        fireEvent.transitionEnd(sheetVeil);
         await timeout(400);
 
         expect(onClose).toHaveBeenCalledTimes(1);

src/components/Sheet/SheetContent.tsx

@@ -5,7 +5,7 @@ import * as React from 'react';
 import {Platform, withMobile} from '../mobile';
 import type {History, Location, MobileContextProps} from '../mobile';
 
-import {sheetBlock} from './constants';
+import {SheetQa, sheetBlock} from './constants';
 import {VelocityTracker} from './utils';
 
 import './Sheet.scss';
@@ -125,7 +125,7 @@ class SheetContent extends React.Component<SheetContentInnerProps, SheetContentS
     render() {
         const {content, contentClassName, swipeAreaClassName, hideTopBar, title} = this.props;
 
-        const {deltaY, swipeAreaTouched, contentTouched, veilTouched, isAnimating} = this.state;
+        const {deltaY, swipeAreaTouched, contentTouched, veilTouched} = this.state;
 
         const veilTransitionMod = {
             'with-transition': !deltaY || veilTouched,
@@ -144,9 +144,10 @@ class SheetContent extends React.Component<SheetContentInnerProps, SheetContentS
                 <div
                     ref={this.veilRef}
                     className={sheetBlock('veil', veilTransitionMod)}
-                    onClick={isAnimating ? undefined : this.onVeilClick}
+                    onClick={this.onVeilClick}
                     onTransitionEnd={this.onVeilTransitionEnd}
                     role="presentation"
+                    data-qa={SheetQa.VEIL}
                 />
                 <div
                     ref={this.sheetRef}
@@ -392,6 +393,10 @@ class SheetContent extends React.Component<SheetContentInnerProps, SheetContentS
     };
 
     private onVeilClick = () => {
+        if (this.state.isAnimating) {
+            return;
+        }
+
         this.setState({veilTouched: true});
         this.hide();
     };

src/components/Sheet/constants.ts

@@ -1,3 +1,7 @@
 import {block} from '../utils/cn';
 
 export const sheetBlock = block('sheet');
+
+export const SheetQa = {
+    VEIL: 'sheet-veil',
+};