Tengo un menú contextual arrastrable con tres filas y tres TextInput s. Ahora mismo tengo dos errores:

1. Cuando se presiona "tab", el menú se cierra.
2. Incluso cuando dejo de cerrar "pestaña" (regreso en handleClose ), "pestaña" no enfoca el cursor al siguiente TextInput .

Intenté agregar tabIndex={0} a los tres div que rodean cada TextInput , pero esto no ayudó con el problema de la pestaña.

¿Alguien sabe qué podría estar mal aquí?

A continuación se muestra el código simplificado (variables como startNumber , endNumber , los comments son variables de estado).

 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> )