Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
BennyAlex opened this issue Oct 23, 2024 · 4 comments
Open

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

BennyAlex opened this issue Oct 23, 2024 · 4 comments
Assignees
Labels
component: select This is the name of the generic UI component, not the React module!

Comments

@BennyAlex
Copy link

BennyAlex commented Oct 23, 2024

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

@BennyAlex BennyAlex added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Oct 23, 2024
@mj12albert
Copy link
Member

@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?

@mj12albert mj12albert added component: select This is the name of the generic UI component, not the React module! status: waiting for author Issue with insufficient information and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Oct 24, 2024
@BennyAlex
Copy link
Author

@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 .

@github-actions github-actions bot added status: waiting for maintainer These issues haven't been looked at yet by a maintainer and removed status: waiting for author Issue with insufficient information labels Oct 29, 2024
@mj12albert mj12albert changed the title MuiSelect is not focusable programmatically [Select] calling .focus() on the ref does not focus the component Oct 29, 2024
@mj12albert
Copy link
Member

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?

@mj12albert mj12albert removed the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Oct 29, 2024
@mj12albert mj12albert self-assigned this Oct 29, 2024
@BennyAlex
Copy link
Author

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: select This is the name of the generic UI component, not the React module!
Projects
None yet
Development

No branches or pull requests

2 participants