Table within a Form within a Dialog seems to mess up tab order

[acommend]

Placing a Table within a Form within a Dialog seems to mess up the tab order. My Dialog contains a Form with two inputs, two selects, then a few tables, then a textarea, and some dialog footer buttons. The behavior I expect is for the tab to progress from component to component in a top down and left to right approach. The behavior I see is that the initial input receives the first tab, then the dialog window, then the first input again, then the next input, then the dialog window, then the first input again and then the tab order progresses normally as expected. Commenting out the tables fixes the tab order. Has anyone experienced this issue? Or does anyone know a potential workaround that doesn't involve manually setting the tabIndex.

[acommend]

I narrowed it down to an issue with defining the tanstack header at column creation time and using flexRender(header.column.columnDef.header, header.getContext()) during table render. I had to remove the use of flexRender and put the implementation of the header directly in the TableHead to fix the issue.

[acommend]

The same issue happens with a table cell when using flexRender. Does anyone know how to fix this issue without having to move the column cell logic within the table?

[acommend]

For some reason moving the cell definition in the columns.tsx from something like

export function BuildColumns() {
   ...
   column.cell = ({getValue, column}) => <span>{ getValue() }<span>
   ...
}

to

const TableCell = ({getValue, column}) => <span>{ getValue() }<span>;

export function BuildColumns() {
   ...
   column.cell = TableCell;
   ...
}

fixed the tab order issue.