How to set focus to another MUI element on Selection?

Question

I have two MUI Select elements. After the user makes a selection on the first, I'd like the second to automatically get activated.

Here's the pseudo-code:

<Select native value={region}      onChange={selectRegion()}>
  {regions.map((r,i) => <option value={r.value} key={`${r.value}-${r.index}`}>)
</Select>
<Select multiple value={zone}>
  {zones.map((z,i) => <option value={z.value} key={`${z.value}-${z.index}`}>)
</Select>
...
const selectRegion(e) => {
  setRegion(e.target.value)
  let z = getZones(e.target.value)
  setZones(z)
  // This is where I want to focus on the Zone input
}

Do you just want to set focus or are you trying to open the second select? — Jordan, Apr 25 '22 at 22:52

score 0 · Answer 1 · answered Apr 26 '22 at 06:53

Can you add a ref to the select component?

const selectRef = useRef(null)

<Select inputRef={selectRef} multiple value={zone}>
  {zones.map((z,i) => <option value={z.value} key={`${z.value}-${z.index}`}>)
</Select>
const selectRegion(e) => {
  setRegion(e.target.value)
  let z = getZones(e.target.value)
  setZones(z)
  // This is where I want to focus on the Zone input
  selectRef.current.focus()
}

How to set focus to another MUI element on Selection?

1 Answers1