Bug [v5.1.0] - Select Component - User is not able to navigate using the keyboard arrow keys when component is selected using the mouse

[aakankshabhende]

Describe the problem

The user is not able to navigate using the keyboard arrow keys when component is selected using a mouse click but it works when component is selected using the tab or enter key.

This behaviour is seen in the select variants which are not typeahead like single select, select with checkbox, etc.

How do you reproduce the problem?

I'm using Chrome browser (but reproducible in Safari and Firefox).

1. Select the select component (single or checkbox variant) using mouse.
2. Try to navigate using keyboard arrow keys.

Sandbox links-

Single select
Select with Checkbox

Expected behavior

Select component (single variant, select with checkbox) should allow keyboard navigation regardless (mouse or keyboard) the way user selects it.

Is this issue blocking you?

This is a critical issue as the select components are used at various places in our customer-facing application.

[aakankshabhende]

Please find the attached video for single option-
https://www.loom.com/share/dada86230fe144b5a2b58a6ccee76da7?sid=29604bd8-91aa-4d48-9e06-a8ba77367990

[aakankshabhende]

Checked option
https://www.loom.com/share/55a7677801094aedb2892b9648b74904?sid=60b37111-b5ce-41d8-b77a-d70e3fa8d7e0

[aakankshabhende]

The page gets scrolled when used arrow keys even when the component is focused

[nicolethoen]

It's odd - i am able to use the keyboard after clicking in chrome with no issue. But in firefox, i'm seeing this same bug.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.