Skip to content

Commit

Permalink
fix(Select): keyboard behavior on mobile (#2082)
Browse files Browse the repository at this point in the history
Co-authored-by: Mr.Dr.Professor Patrick <alaev89@yandex-team.ru>
  • Loading branch information
iapolya and korvin89 authored Feb 12, 2025
1 parent 318bfa2 commit 95a1d20
Show file tree
Hide file tree
Showing 4 changed files with 36 additions and 12 deletions.
14 changes: 10 additions & 4 deletions src/components/Select/Select.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -178,7 +181,7 @@ export const Select = React.forwardRef<HTMLButtonElement, SelectProps>(function

handleSelection(option);
},
[handleSelection, multiple],
[handleSelection, mobile, multiple],
);

const handleControlKeyDown = React.useCallback(
Expand Down Expand Up @@ -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],
),
});

Expand Down
19 changes: 14 additions & 5 deletions src/components/Select/__tests__/Select.filter.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -138,7 +139,6 @@ describe('Select filter', () => {
filterable
onFilterChange={onFilterChange}
onClose={onClose}
qa="select"
filterPlaceholder="filter"
>
<Select.Option value="one">One</Select.Option>
Expand All @@ -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);
Expand All @@ -170,7 +175,6 @@ describe('Select filter', () => {
filterable
onFilterChange={onFilterChange}
onClose={onClose}
qa="select"
filterPlaceholder="filter"
>
<Select.Option value="one">One</Select.Option>
Expand All @@ -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);
Expand Down
11 changes: 8 additions & 3 deletions src/components/Sheet/SheetContent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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,
Expand All @@ -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}
Expand Down Expand Up @@ -392,6 +393,10 @@ class SheetContent extends React.Component<SheetContentInnerProps, SheetContentS
};

private onVeilClick = () => {
if (this.state.isAnimating) {
return;
}

this.setState({veilTouched: true});
this.hide();
};
Expand Down
4 changes: 4 additions & 0 deletions src/components/Sheet/constants.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
import {block} from '../utils/cn';

export const sheetBlock = block('sheet');

export const SheetQa = {
VEIL: 'sheet-veil',
};

0 comments on commit 95a1d20

Please sign in to comment.