react-filterable-table icon indicating copy to clipboard operation
react-filterable-table copied to clipboard

sorting with rendered radio inputs doesn't display correctly

Open drizco opened this issue 6 years ago • 1 comments

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

Screen Shot 2019-11-27 at 1 47 54 PM

drizco avatar Nov 27 '19 20:11 drizco

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.

Screen Shot 2019-11-27 at 2 59 11 PM Screen Shot 2019-11-27 at 2 59 43 PM

drizco avatar Nov 27 '19 22:11 drizco