[Select] calling `.focus()` on the ref does not focus the component

[BennyAlex]

Steps to reproduce

https://mui.com/material-ui/react-select/ document.getElementById('demo-simple-select').focus()

Current behavior

If you call .focus() on any of the elments that are rendered by MuiSelect or on the refs element it will not focus the select or it will only visually focus it, but pressing space to open the menu will not work (and instead scrolls the page down).

Expected behavior

That I can call .focus on the ref or an element to focus the select or that there is an alternative way documented / implemented There is nothing document about this behavior in the docs.

Context

Having a way to programmatically focus an select

Your environment

Mui@6, Chrome

Search keywords: MuiSelect

[mj12albert]

@BennyAlex I don't think document.getElementById('demo-simple-select').focus() will work, but you should be able to do it with a ref

Would you mind sharing a sandbox?

[BennyAlex]

@mj12albert https://codesandbox.io/p/sandbox/elated-payne-nmqpw3

The ref is also just returning an html element so calling focus on the ref or the element itself should not make a difference .

[mj12albert]

or it will only visually focus it

@BennyAlex Thanks for the repro, in your sandbox focus() on the ref does nothing for me. Were you able to (consistently) visually focus it? (getElementById?!)

Did you expect the listbox to open in addition to the component gaining focus?

[BennyAlex]

@mj12albert Yeah on some element inside it calling focus will visually focus the input. But I cant open it and if openOnFocus is set on an autocomplete and I focus it via JS it should also open.