epam / epam/UUI

[PickerInput ]: Focus should be on selected item when dropdown opens

Open
#3,084 0 comments 0 reactions 0 assignees View on GitHub
improvement
Dominant language
TypeScript
Stars
247
Forks
78
Avg merge
14h 27m
Merged PRs (30d)
15

Description

## Now

Image

The PickerInput component shows the selected value with a blue checkmark, but when the dropdown opens, the focus (gray highlight) is always on the first item in the list instead of the currently selected item.

Current behavior:

1. User selects "Akan" from the language list
2. "Akan" is marked with a blue checkmark ✓
3. When dropdown reopens, focus highlight is on "Abkhazian" (first item)
4. User has to navigate to find their previously selected item

## To Do

Image

When the dropdown opens, the focus should automatically be on the currently selected item (the one with the checkmark), not on the first item in the list.

Expected behavior:

1. User selects "Akan" from the language list
2. "Akan" is marked with a blue checkmark ✓
3. When dropdown reopens, focus highlight should be on "Akan"
4. User can immediately see and interact with their current selection

Benefits:

- Better user experience and accessibility
- Consistent with standard dropdown behavior
- Reduces cognitive load for users
- Follows UI/UX best practices for selection components

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.