Merge pull request #78 from acgotaku/fix/slider

fix: slider blur sync data
acgotaku · May 4, 2023 · 5f65fd8 · 5f65fd8
2 parents e9c16a4 + 1bc35a4
commit 5f65fd8
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 10 deletions.
diff --git a/src/components/Slider/RangeSlider.tsx b/src/components/Slider/RangeSlider.tsx
@@ -76,24 +76,28 @@ const RangeSlider: React.FC<IRangeSliderProps> = ({
   );
   const checkInputStartValue = useCallback(() => {
     if (validInputStartValue) {
-      setRangeValue({
+      const newRangeValue = {
         start: Number(inputStartValue),
         end: rangeValue.end
-      });
+      };
+      setRangeValue(newRangeValue);
+      onChange?.(newRangeValue);
     } else {
       setInputStartValue(rangeValue.start);
     }
-  }, [inputStartValue, validInputStartValue, rangeValue]);
+  }, [inputStartValue, validInputStartValue, rangeValue, onChange]);
   const checkInputEndValue = useCallback(() => {
     if (validInputEndValue) {
-      setRangeValue({
+      const newRangeValue = {
         start: rangeValue.start,
         end: Number(inputEndValue)
-      });
+      };
+      setRangeValue(newRangeValue);
+      onChange?.(newRangeValue);
     } else {
       setInputEndValue(rangeValue.end);
     }
-  }, [inputEndValue, validInputEndValue, rangeValue]);
+  }, [inputEndValue, validInputEndValue, rangeValue, onChange]);
 
   const blurInputStartHandler = useCallback(() => {
     checkInputStartValue();
@@ -143,7 +147,7 @@ const RangeSlider: React.FC<IRangeSliderProps> = ({
         };
         setRangeValue(newRangeValue);
         setInputStartValue(value);
-        onChange && onChange(newRangeValue);
+        onChange?.(newRangeValue);
       }
     },
     [rangeValue, onChange]
@@ -159,7 +163,7 @@ const RangeSlider: React.FC<IRangeSliderProps> = ({
         };
         setRangeValue(newRangeValue);
         setInputEndValue(value);
-        onChange && onChange(newRangeValue);
+        onChange?.(newRangeValue);
       }
     },
     [rangeValue, onChange]

diff --git a/src/components/Slider/Slider.tsx b/src/components/Slider/Slider.tsx
@@ -50,11 +50,13 @@ const Slider: React.FC<ISliderProps> = ({
   );
   const checkInputValue = useCallback(() => {
     if (validInputValue) {
-      setRangeValue(Number(inputValue));
+      const value = Number(inputValue);
+      setRangeValue(value);
+      onChange?.(value);
     } else {
       setInputValue(rangeValue);
     }
-  }, [inputValue, validInputValue, rangeValue]);
+  }, [inputValue, validInputValue, rangeValue, onChange]);
   const blurInputHandler = useCallback(() => {
     checkInputValue();
   }, [checkInputValue]);