How to Programmatically trigger focus() on Material UI Select field?

2
votes

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 in Material UI [email protected]. 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.

Question on GitHub: https://github.com/callemall/material-ui/issues/9182#issuecomment-345148074

Code Sandbox example: https://codesandbox.io/s/m43qqyo2zy

1
reactjsmaterial-ui

1 Answers

3
votes

The node passed to Select.props.inputRef() references a hidden input. You would need to focus() on the div that is rendered as its sibling. Also, you need to handle the Select element case first in handleKeyPressInternal() because getElementsByName() will return the input.

This doesn't feel right, though, because you are relying on Select to render the focusable div as its immediate sibling. Could be grounds to extend inputRef() on Select to return the node that can visually receive focus.

https://codesandbox.io/s/zooz41oo3