material-react-table version
3.2.1
react & react-dom versions
18.3.1
Describe the bug and the steps to reproduce it
Rows and Cells don't have a stable keys if the row is move to another index. This cause users to lose focus if the row order change.
- Render a table with some data with a cell that has a input field
- Focus on the input
- Reorder the table (programmatically)
Why this Matters
Preserves the input DOM node, keeping focus when rows get reordered.
Minimal, Reproducible Example - (Optional, but Recommended)
https://codesandbox.io/p/sandbox/awesome-chebyshev-lvrv4z
Screenshots or Videos (Optional)
Relevant lines of codes
|
const key = `${cell.id}-${staticRowIndex}`; |
|
const key = `${row.id}-${row.index}`; |
Do you intend to try to help solve this bug with your own PR?
Yes, I am also opening a PR that solves the problem along side this issue
Terms
material-react-table version
3.2.1
react & react-dom versions
18.3.1
Describe the bug and the steps to reproduce it
Rows and Cells don't have a stable keys if the row is move to another index. This cause users to lose focus if the row order change.
Why this Matters
Preserves the input DOM node, keeping focus when rows get reordered.
Minimal, Reproducible Example - (Optional, but Recommended)
https://codesandbox.io/p/sandbox/awesome-chebyshev-lvrv4z
Screenshots or Videos (Optional)
Relevant lines of codes
material-react-table/packages/material-react-table/src/components/body/MRT_TableBodyRow.tsx
Line 251 in 8293b96
material-react-table/packages/material-react-table/src/components/body/MRT_TableBody.tsx
Line 178 in 8293b96
Do you intend to try to help solve this bug with your own PR?
Yes, I am also opening a PR that solves the problem along side this issue
Terms