Material-ui: How to Programmatically trigger focus() on Select field?

Created on 16 Nov 2017 · 3Comments · Source: mui-org/material-ui

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!

[x] 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

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

Context

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 1.0.0-beta.21 |
| React | 16.1.0 |
| browser | Chrome 62 |
| etc | |

question

Source

zachariahtimothy

Most helpful comment

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

zachariahtimothy on 22 Nov 2017

👍3 👎2

All 3 comments

@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! 😄

m2mathew on 17 Nov 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 on 17 Nov 2017

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

zachariahtimothy on 22 Nov 2017

👍3 👎2

Was this page helpful?

0 / 5 - 0 ratings