From 020806f3545be9d3086bd6c876744109fa737598 Mon Sep 17 00:00:00 2001 From: Juha Lundan Date: Fri, 16 Jun 2023 21:13:40 +0300 Subject: [PATCH] Range slider, additional useEffect dependencies (#573) 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. --- .../material-react-table/src/inputs/MRT_FilterRangeSlider.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-react-table/src/inputs/MRT_FilterRangeSlider.tsx b/packages/material-react-table/src/inputs/MRT_FilterRangeSlider.tsx index b2bfa320b..d4ff78230 100644 --- a/packages/material-react-table/src/inputs/MRT_FilterRangeSlider.tsx +++ b/packages/material-react-table/src/inputs/MRT_FilterRangeSlider.tsx @@ -78,7 +78,7 @@ export const MRT_FilterRangeSlider = ({ header, table }: Props) => { } } isMounted.current = true; - }, [column.getFilterValue()]); + }, [columnFilterValue, min, max]); return (