Диалог пользовательского интерфейса материала, в котором таблица изменяет tabindex по вертикали

Question

У меня есть диалог material UI, в котором есть таблица.

<Dialog
      open={open}
      onClose={handleClose}
      maxWidth={'xl'}
      aria-labelledby='scroll-dialog-title'
      aria-describedby='scroll-dialog-description'
      disableBackdropClick
      className={css.root}>
      <IconButton className={css.closeButton} aria-label='close' onClick={handleClose}>
        <CloseIcon />
      </IconButton>
{data?.isdata ? (
 <div className={css.tableWrapper}>
            <Table aria-label='simple table'>
              <TableHead> // Here there is a render for table header</TableHead> <TableBody>
                {rows.map((row, index) => (
                  <TableRow key={index}>
                    {row.data.map((item, index) => (
                      <TableCell></TableCell><InputBase></InputBase></Table></div>) : null }
</Dialog 

Теперь, здесь у меня есть, скажем, от 5 до 6 полей ввода, я пытаюсь, если пользователь нажимает вкладку, это должно произойти вертикально, а не горизонтально.

Итак, как я могу этого добиться.

Answer 1

Просто используйте tabindex и вычислите его на основе индекса строки таблицы, вот пример, что go через 1-й столбец, когда вы нажимаете вкладку (перед запуском, сфокусируйте ввод в 1-м столбце)

const domContainer = document.querySelector('#root')

const e = React.createElement;

function Field ({ tabIndex = 0 }) {
  return e( 'input', { tabIndex })
}

function Row ({ tabIndex }) {
  return e('tr', {}, [ e(Field, { tabIndex }), e(Field) ])
}

function Table () {
  const rows = []
  for (let i = 0; i < 10; i++) {
    rows.push(e(Row, { tabIndex: i + 1 }))
  }

  return e('table', {}, rows)
}

ReactDOM.render(e(Table), domContainer)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>