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

How to Programmatically trigger focus() on Select field? #9182

Closed
1 task done
zachariahtimothy opened this issue Nov 16, 2017 · 3 comments
Closed
1 task done

How to Programmatically trigger focus() on Select field? #9182

zachariahtimothy opened this issue Nov 16, 2017 · 3 comments
Labels
support: question Community support but can be turned into an improvement

Comments

@zachariahtimothy
Copy link

zachariahtimothy commented Nov 16, 2017

My app forms utilize the enter button to tab to specified fields for speed on a ten-key keyboard. When enter is hit, we do a DOM lookup and trigger focus() on the next element. This works great on text fields but I cannot understand how to accomplish this on a Select box. I can get each of the DOM elements that make up the Select structure, but triggering focus() at any level does nothing.
Note: I am able to grab the ref of the item via inputRef on the select to prevent us from traversing the DOM but it still yields no results.
Thank you in advance for any guidance!

  • I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Select becomes focused (but not open) when focus() is triggered manually. Expect the same behavior as hitting on the preceding element.

Current Behavior

Triggering node.focus() does nothing, nor does it trigger on any element within the select DOM structure.

Steps to Reproduce (for bugs)

https://codesandbox.io/s/m43qqyo2zy

  1. Select first text box.
  2. Hit Enter key.
  3. Notice 2nd text box is focused FTW.
  4. Hit Enter key again.
  5. Nothing happens.

Context

Your Environment

Tech Version
Material-UI 1.0.0-beta.21
React 16.1.0
browser Chrome 62
etc
@m2mathew m2mathew added the support: question Community support but can be turned into an improvement label Nov 17, 2017
@m2mathew
Copy link
Member

@zachariahtimothy I am not convinced this is an issue with MUI. It looks like you have some form cleanup to do. Head over to Stack Overflow for questions about how to use the library. Cheers! 😄

@zachariahtimothy
Copy link
Author

zachariahtimothy commented Nov 17, 2017

@m2mathew I see what you are saying, I will ask the question on stack overflow.
My view is if MUI's select is impossible to treat as a native form element in terms of events then it would be a problem with the library. I did try it with the native flag which worked, so that will get me by, just does not have the beauty I desire like the overridden select :).
Thank you for the reply and the awesome library!

@zachariahtimothy
Copy link
Author

In case anyone stumbles here with a similar issue: this works: https://stackoverflow.com/questions/47353384/how-to-programmatically-trigger-focus-on-material-ui-select-field

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
support: question Community support but can be turned into an improvement
Projects
None yet
Development

No branches or pull requests

2 participants