[material-ui][Select] No visible highlight when focus is on another Element

[supidupicoder2]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:
https://react-tgv59j-vsvdvu.stackblitz.io

Steps:

1. Open link
2. Click on dropdown
3. Preselection for "Twenty" is visible
4. If i hit "T" on the keyboard, the selection goes to the next option
5. Now eiher click the button below, or click the button, hold the left mouse cursor, drag it somewhere else on the whitespace, and release it
6. If you click the dropdown again, nothing is preselected, at least visibly
7. If you hit "T", the second element is instantly selected

ALSO:
If you hit "Enter" in Step 6 without selecting any other element, "Twenty" will be selected. So i assume it is preselected, but not visibly.

Current behavior 😯

After clicking the button, the preselection is not visible anymore.

Expected behavior 🤔

I would either expect "Twenty" already being visibly preselected in Step 6, or the Keyboard Action of Step 7 selecting the first Element.

Context 🔦

I currently have an issuew with keyboard controlls sometimes not working for some dropdowns in my application. When the keyboard controlls do not work, there is also nothing preselected.
I assume this is part of the issue.

Your environment 🌎

See stackblitz live example environment.
Browser was Chrome.

[DiegoAndai]

Hey @supidupicoder2, thanks for the report!

This seems like a bug. I can repro on the docs:

1. Click another element so it gains focus
2. Open Select
3. No visible highlight, but the highlight is "working" as keyboard navigation works: after pressing the ArrowDown key, the highlight kicks in again

Screen.Recording.2023-10-27.at.16.02.03.mov

[JeevaRamanathan]

Hi @DiegoAndai, I noticed that when the user focuses on another element before opening the select dropdown menu, also has no preselection.

i.e.

1. Click on button first
2. Open drop down
3. It has no preselection

Given that there is no default value selected, it is expected for the basic dropdown menu to be preselected or not?

[DiegoAndai]

@JeevaRamanathan, for the Menu component, this is expected: there's no "default" highlight on the first element.

For the Select component, it's not expected: the first element should be highlighted if no value is selected. That is what this issue is pointing out.

[DarhkVoyd]

@DiegoAndai Should I take this?

[DiegoAndai]

@DarhkVoyd please! go ahead 😊
Let me know if there's anything I can help with

[DarhkVoyd]

Hi @DiegoAndai. Apologies for the delay, I'm quite occupied with my college project and might not be able to work on this issue promptly. If it's urgent, kindly reassign it to someone else. Thanks for your understanding.

[DarhkVoyd]

@DiegoAndai Hey, I'm back on this, will provide an update to you soon.

[DiegoAndai]

This will be fixed when we refactor the Select component to use Base UI's hooks: #40210