Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(Select): keyboard behavior on mobile #2082

Merged
merged 6 commits into from
Feb 12, 2025
Merged

Conversation

iapolya
Copy link
Contributor

@iapolya iapolya commented Jan 31, 2025

There are cases when the select with an open keyboard behaves inconveniently for the user

  1. Auto-closing of Select when the keyboard is closed. Reproduced in Safari and Yandex Browser on iOS

Click on "Готово" button

IMG_2814.MP4
  1. The keyboard opens after selecting item. This is inconvenient because it requires the user to close the keyboard if they want to select an item from the list located nearby
IMG_2815.MP4

Questions:

  1. For which cases might we need useFocusWithin in a mobile select?
  2. Сan I remove filterRef.current?.focus() on mobile?

@iapolya iapolya requested a review from korvin89 as a code owner January 31, 2025 16:42
@gravity-ui-bot
Copy link
Contributor

Preview is ready.

@gravity-ui-bot
Copy link
Contributor

Visual Tests Report is ready.

@korvin89
Copy link
Contributor

@iapolya Hi! Could u fix failed test?

@iapolya iapolya requested review from amje and ValeraS as code owners January 31, 2025 17:07
@iapolya iapolya force-pushed the feat/select-close-on-mobile branch 2 times, most recently from 73c056a to e9c0afa Compare January 31, 2025 17:17
@iapolya
Copy link
Contributor Author

iapolya commented Feb 5, 2025

@korvin89 ping

@iapolya iapolya force-pushed the feat/select-close-on-mobile branch from b6c837e to ebdd9b2 Compare February 7, 2025 12:16
@iapolya iapolya force-pushed the feat/select-close-on-mobile branch 3 times, most recently from 714d265 to b1df335 Compare February 9, 2025 12:51
@iapolya iapolya requested a review from ValeraS February 10, 2025 08:15
@iapolya iapolya force-pushed the feat/select-close-on-mobile branch from b1df335 to 00b2481 Compare February 11, 2025 12:08
@@ -241,6 +244,7 @@ export const Select = React.forwardRef<HTMLButtonElement, SelectProps>(function
},
[handleClose, onBlur],
),
isDisabled: mobile,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Lets remove this line and don't call handleClose in onBlurWithin in case of mobile device

@iapolya iapolya force-pushed the feat/select-close-on-mobile branch from 00b2481 to 8dc8058 Compare February 12, 2025 09:30
src/components/Select/Select.tsx Outdated Show resolved Hide resolved
@iapolya iapolya force-pushed the feat/select-close-on-mobile branch from 8dc8058 to 0bc4153 Compare February 12, 2025 12:03
@iapolya iapolya force-pushed the feat/select-close-on-mobile branch from 0bc4153 to d24b377 Compare February 12, 2025 12:03
@amje amje merged commit 95a1d20 into main Feb 12, 2025
6 checks passed
@amje amje deleted the feat/select-close-on-mobile branch February 12, 2025 16:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants