Как сделать переход между элементами по нажатию на tab?

Question

[Дмитрий Афонченко]

Добрый день, товарищи! Появился следующий вопрос. На странице есть небольшая форма логина, которая находится внутри выпадающего меню, которое открывается при нажатии на кнопку.

Если открыть эту менюшку и вбить логин, а затем нажать Tab, то фокус перейдет не к паролю, а куда-то к следующему элементу, хотя tabindex задан. Вопрос такой, почему так происходит и куда копать чтобы это исправить?

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

Comments

[Константин]

Для начала, я бы проверил, что на странице нет другого элемента с таким же tabindex, как тот, куда вы хотите отправить пользователя.

[Дмитрий Афонченко]

Константин, таких нет это точно.

[Константин]

Дмитрий Афонченко, тогда надо смотреть на html, который получился в итоге, я не настолько хорошо знаком с реактом.

Answer 1

[Дмитрий Афонченко]

В общем с компонентом меню, никак не получится сделать нормального переключения. Где-то на гихабе материала вычитал, что он так рассчитан, что при нажатии на TAB будет закрываться.