filter fix

src/components/MultiRangeSlider.tsx

@@ -1,4 +1,4 @@
-import { useState, useRef } from "react";
+import { useState, useRef, useEffect } from "react";
 import RangeSlider from "react-range-slider-input";
 // import "react-range-slider-input/dist/style.css";
 import "./multiRamgeSlider.css";
@@ -12,24 +12,55 @@ interface MultiRangeSliderProps {
 const MultiRangeSlider = ({ min, max, onChange }: MultiRangeSliderProps) => {
   const [firstValue, setFirstValue] = useState(min);
   const [secondValue, setSecondValue] = useState(max);
+  const firstInputRef = useRef(null);
+  const secondInputRef = useRef(null);
 
   const handleOnRangeInputChange = (e: [a: number, b: number]) => {
     setFirstValue(e[0]);
     setSecondValue(e[1]);
   };
 
+  const handleOnFirstInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = Number(e.target.value);
+    if (value >= min && value <= max) {
+      setFirstValue(value);
+    }
+  };
+
+  const handleOnSecondInputChange = (
+    e: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const value = Number(e.target.value);
+    if (value >= min && value <= max) {
+      setSecondValue(value);
+    }
+  };
+
+  useEffect(() => {
+    if (!firstInputRef.current) return;
+    (firstInputRef.current as HTMLInputElement).focus();
+  }, [firstValue]);
+
+  useEffect(() => {
+    if (!secondInputRef.current) return;
+    (secondInputRef.current as HTMLInputElement).focus();
+  }, [secondValue]);
+
   return (
     <div className="px-2">
       <div className="flex justify-between p-3 bg-white rounded-2xl relative flex-col">
         <div className="flex justify-between">
           <input
+            ref={firstInputRef}
             key={firstValue}
             type="number"
-            onChange={(e) => console.log("e", e.target.value)}
+            onChange={handleOnFirstInputChange}
             defaultValue={firstValue}
             className="focus:outline-none input_number"
           />
           <input
+            ref={secondInputRef}
+            onChange={handleOnSecondInputChange}
             key={secondValue}
             type="number"
             defaultValue={secondValue}
@@ -40,7 +71,7 @@ const MultiRangeSlider = ({ min, max, onChange }: MultiRangeSliderProps) => {
           min={min}
           max={max}
           value={[firstValue, secondValue]}
-          className="absolute bottom-0 left-2 w-[calc(100%-16px)] z-20"
+          className="absolute -bottom-3 left-0 w-[calc(100%-16px)] z-20"
           onInput={handleOnRangeInputChange}
         />
       </div>