How to make transition between elements on pressing tab?

Question

JavaScript

Good afternoon, comrades! The next question came up. There is a small login form on the page, which is located inside a drop-down menu that opens when you click on the button.
If you open this menu and type in your login, and then press Tab, then the focus will not go to the password, but somewhere to the next element, although tabindex is set. The question is, why is this happening and where to dig to fix it?

<Toolbar disableGutters={!open}>
              {console.log(this.state.name == null)}

              <IconButton disabled={this.state.name == null}
                color="inherit"
                aria-label="Open drawer"
                onClick={this.handleToggle}
                className={classNames(classes.menuButton, open && classes.hide)}
              >
                <MenuIcon />
              </IconButton>
              <Typography variant="title" color="inherit" className={classes.grow} noWrap>
                T1-Install
              </Typography>

              <div>
                {loginText}
                <Menu
                  id="menu-appbar"
                  anchorEl={anchorEl}
                  anchorOrigin={{
                    vertical: 'top',
                    horizontal: 'right',
                  }}
                  transformOrigin={{
                    vertical: 'top',
                    horizontal: 'right',
                  }}
                  open={openLogin}
                  onClose={this.handleClose}
                >
                  <p></p>
                  <form onSubmit={this.onLoginSubmit}>
                    <ListItem>
                      <TextField
                        tabIndex = "1"
                        error
                        id="standard-name"
                        label="Логин"
                        name="login"
                        className={classes.loginField}
                        margin="normal"
                      />
                    </ListItem>
                    <ListItem>
                      <TextField
                        error
                        tabIndex = "2"
                        id="standard-password-input"
                        label="Пароль"
                        className={classes.passwordField}
                        type="password"
                        name="password"
                        autoComplete="current-password"
                        margin="normal"
                      />
                    </ListItem>
                    <List>

                      <ListItem >
                        <Button type='submit' className={classes.loginButton}>
                          ВОЙТИ
                        </Button>
                      </ListItem>
                    </List>
                  </form>
                </Menu>
              </div>
 </Toolbar>

Answer 1

In general, with the menu component, there is no way to make a normal switch. Somewhere on the gihab of the material I read that it is designed in such a way that when you press TAB it will close.