如何将 cursor 聚焦到 React 可拖动菜单中的下一个 TextInput？

Question

I have a draggable context menu with three rows and three TextInput s. Right now I have two bugs:

1. When "tab" is hit, the menu closes
2. Even when I stop "tab" from closing (I return in the handleClose ), "tab" doesn't focus the cursor to the next TextInput .

I've tried adding tabIndex={0} to the three div s that surround each TextInput , but this didn't help with the tab issue.

Does anyone know what might be wrong here?

Below is the simplified code (variables such as startNumber , endNumber , comments are state variables).

const handleClose = (event?, reason?) => {
  if (reason && reason === 'tabKeyDown') {
    // Prevent the 'Tab' key from closing the window
    return;
  }
  setShouldOpen(false);
  otherStuffHere();
}

...

return (
<Draggable cancel="textarea">
<Menu
  open={shouldOpen}
  onClose={handleClose}
  anchorReference="anchorPosition"
  anchorPosition={{ top: y, left: x }}
  className={classes.myContextMenu}
>

  <div className={classes.row}>
    <div className={classes.title}>
      <Text>First number</Text>
    </div>
    <div className={classes.text} tabIndex={0}>
      <TextInput
        fullWidth
        value={startNumber}
        disabled={readOnly}
        onChange={handleStartNumberChange}
      />
    </div>
  </div>

  <div className={classes.row}>
    <div className={classes.title}>
      <Text>End number</Text>
    </div>
    <div className={classes.text} tabIndex={0}>
      <TextInput
        fullWidth
        value={endNumber}
        disabled={readOnly}
        onChange={handleEndNumberChange}
      />
    </div>
  </div>

  <div className={classes.row}>
    <div className={classes.title}>
      <Text>Comments</Text>
    </div>
    <div className={classes.text} tabIndex={0}>
      <TextInput
        fullWidth
        value={comments}
        disabled={readOnly}
        onChange={handleCommentsChange}
      />
    </div>
  </div>
</Menu>
</Draggable>
)

Answer 1

I wasn't able to find a solution while still using the Menu component, but I used the Popover component instead.

Using the same CSS and same everything else, I got the tab to work as intended without changing the UI.