Skip to content

Commit

Permalink
Range slider, additional useEffect dependencies (#573)
Browse files Browse the repository at this point in the history
This commit adds min and max values to useEffect dependencies. The change relates to an issue with multiple render cycles, for example while updating table's input data over time before user has a chance to interact with the sliders. If client code updates the table's data set, that triggers another render. If the original data set (on the first render of the component) had zero rows, then filterValues will be set to [0,0] indefinitely (and makes the slider heads appear over each others in zero position) until the user manipulates the sliders in the UI. If the client code pushes in a new data set before the user manipulates the slider in the UI, filterValues will not be updated, since the useEffect does not listen to it, and useState's initial value is set only on the first render. The issue is fixed when user ends a slider drag in the UI, which in turn triggers onChangeCommitted, which calls column.setFilterValue, which sets up the sliders correctly.
  • Loading branch information
jlundan committed Jun 16, 2023
1 parent 853ac21 commit 020806f
Showing 1 changed file with 1 addition and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ export const MRT_FilterRangeSlider = ({ header, table }: Props) => {
}
}
isMounted.current = true;
}, [column.getFilterValue()]);
}, [columnFilterValue, min, max]);

return (
<Stack>
Expand Down

2 comments on commit 020806f

@vercel
Copy link

@vercel vercel bot commented on 020806f Jun 16, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on 020806f Jun 16, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.