I have a draggable context menu with three rows and three TextInputs. 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 divs 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>
)