sorting with rendered radio inputs doesn't display correctly
This is an awesome component. But I'm having an issue when trying to use the render function to display radio inputs.
I have fields including three radio buttons that all look something like this:
{
name: "yes",
displayName: "Yes",
sortable: true,
render: ({ record, value }) => {
return (
<input
type="radio"
name={`submission-approved-${record.uid}`}
value="yes"
checked={value}
onChange={e => handleChange(e, record.uid)}
/>
);
}
}
On the first render, everything is perfect. It's only after trying to sort a column that the inputs start to ignore their checked attribute. clicking a radio triggers a rerender and all inputs show correctly again. I'm stumped...
Here's a repro of the issue: https://github.com/RyanDriscoll/react-filterable-table-issue-repro
After sorting, a chunk of inputs all appear blank but inspecting them shows that they do have the 'checked' attribute. I think I figured out the pattern. It looks as though rows that get sorted to an earlier position (their index decreases) wind up not rendering as 'checked' even though they have the attribute.