[material-ui][docs] Bug with keyboard navigation in Select

[SovNerd]

Steps to reproduce

Link to live example: (required)

Steps:

1. Go to https://mui.com/material-ui/
2. Then open Components -> Inputs -> Select
3. Use the Basic Select Component and try to navigate using your keyboard.

Current behavior

When I navigate from the main menu to go to the page where you have the MUI Select Component. Using the keyboard to navigate does not work. It only work after I refresh the page.

Expected behavior

Using the keyboard to navigate on the Select Component must highlight the options when the user navigates using their keyboard and select by pressing enter.

Context

No response

Your environment

npx @mui/envinfo

``` System: OS: macOS 13.6.7 Binaries: Node: 18.14.2 - ~/.nvm/versions/node/v18.14.2/bin/node npm: 9.5.0 - ~/.nvm/versions/node/v18.14.2/bin/npm pnpm: Not Found Browsers: Chrome: Not Found Edge: Not Found Safari: 16.6 npmPackages: @emotion/react: 11.11.4 @emotion/styled: 11.11.0 @mui/base: 5.0.0-beta.39 @mui/core-downloads-tracker: 5.15.13 @mui/icons-material: 5.15.13 @mui/lab: 5.0.0-alpha.168 @mui/material: 5.15.13 @mui/private-theming: 5.15.13 @mui/styled-engine: 5.15.11 @mui/system: 5.15.13 @mui/types: 7.2.13 @mui/utils: 5.15.13 @mui/x-data-grid: 6.19.6 @mui/x-date-pickers: ^6.18.4 => 6.19.7 @mui/x-date-pickers-pro: ^6.18.4 => 6.19.7 @mui/x-license-pro: 6.10.2 @types/react: 17.0.80 react: 17.0.2 react-dom: 17.0.2 typescript: 4.9.5 ```

Search keywords: MUI Select, Select Highlight

[mnajdova]

Can you share a screen recording, it's not clear what place you are referring to. Thanks!

[SovNerd]

Hi Mnajdova, here's a screen recording demonstrating the bug

[aarongarciah]

I'm unable to reproduce in Safari 16.5, Safari 17.5, Chrome 125, and Firefox 126 (all of them in macOS).

[aarongarciah]

@SovNerd I'm assuming once the Select has the focus you're navigating up/down with the arrow keys but the options are not highlighted. Can you share your exact keyboard sequence?

[SovNerd]

@SovNerd I'm assuming once the Select has the focus you're navigating up/down with the arrow keys but the options are not highlighted. Can you share your exact keyboard sequence?

That's correct, I noticed that there are some files that load only when I refresh the page on my networks and it works, once the "static/chunks/pages/material-ui/react-select-8134d48f0b6fe285.js" runtime is loaded.

I used my Up and Down keys to navigate the select options then press enter to choose the option. The option selects, but the issue is that I never know what I am selecting.

[aarongarciah]

Since I can't reproduce the issue, can you share a new recording with the network devtools panel visible?

[SovNerd]

See the recording here

Initial load: [image 1] (https://netpayie-my.sharepoint.com/:i:/g/personal/elton_brown_np_ie/EaRcFADr1jxLmpDw5eGL3_YBQdloPviZE7cO0I1bh3X3wg?e=AefOSG) After Refresh: [image 2] (https://netpayie-my.sharepoint.com/:v:/g/personal/elton_brown_np_ie/ETN-tfiN5jxHp64H2GlrftkBMK4Pv7c5E_Q19jtnXUhsCQ?nav=eyJyZWZlcnJhbEluZm8iOnsicmVmZXJyYWxBcHAiOiJPbmVEcml2ZUZvckJ1c2luZXNzIiwicmVmZXJyYWxBcHBQbGF0Zm9ybSI6IldlYiIsInJlZmVycmFsTW9kZSI6InZpZXciLCJyZWZlcnJhbFZpZXciOiJNeUZpbGVzTGlua0NvcHkifX0&e=jiVdxw)

[SovNerd]

Hi, any feedback on this?

[aarongarciah]

I used Browserstack to test on Safari 16.5, and it also worked fine. I can't reproduce the issue. Can you confirm that it works properly in this CodeSandbox? https://codesandbox.io/p/sandbox/determined-agnesi-ymllnq?file=%2Fsrc%2FDemo.tsx This is very strange as only the mentioned chunk seems not to be loading for you.

@mnajdova may I ask if you can try to reproduce the issue on Safari?

[SovNerd]

It works on the CodeSandbox https://codesandbox.io/p/sandbox/determined-agnesi-ymllnq?file=%2Fsrc%2FDemo.tsx

[aarongarciah]

Can you reproduce the issue in incognito mode and other browsers?

[github-actions[bot]]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.

[SovNerd]

It seems like the issue is only there when using the Safari Browser, even when I try it in a private window. It works when I use Firefox, Opera GX and Chrome.

[SovNerd]

Hi @aarongarciah, any feedback on this issue?

[aarongarciah]

Hey @SovNerd! I'm unable to reproduce the issue, even with BrowserStack and Safari 16.5

I'd recommend checking the browser console to see if there's a message that could point us in any direction. Do you have some browser extension that could be interfering?

Without any more clues, sadly, we can't do much.

[SovNerd]

Hey @aarongarciah, thanks for your feedback. I have not installed any extensions on my Safari browser.

I'll try to run more test to see if I can get more clues and give feedback on this.

[aarongarciah]

Thanks @SovNerd!

[frontend-sensei]

@SovNerd @aarongarciah

Same issue. But with Menu component. Used as dropdown. When navigating via keyboard, selected menu item doesn't highlight.

Keyboard navigation sequence:

• Press enter when focused on dropdown button
• Press arrow down when focused in the menu
• Press enter

As result, new menu item selected. That means, all things probably works, except highlighting selected menu item. Specifically in Safari. After page refresh, issue disappears ;)

Safari 16.3. No installed extensions.

No new info about reproducing. But issue persists

[SovNerd]

Hi @aarongarciah, here is a similar issue: [Select][base-ui] Keyboard navigation does not work in Safari #39083