fix:debounce bug

hasadna · Sep 16, 2023 · 0916be0 · 0916be0
1 parent e1a139f
commit 0916be0
Showing 1 changed file with 10 additions and 4 deletions.
diff --git a/src/pages/components/LineSelector.tsx b/src/pages/components/LineSelector.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react'
+import React, { useCallback, useLayoutEffect, useState } from 'react'
 import { TEXTS } from 'src/resources/texts'
 import { INPUT_SIZE } from 'src/resources/sizes'
 import debounce from 'lodash.debounce'
@@ -10,17 +10,23 @@ type LineSelectorProps = {
 }
 
 const LineSelector = ({ lineNumber, setLineNumber }: LineSelectorProps) => {
-  const debouncedSetLineNumber = useCallback(debounce(setLineNumber), [setLineNumber])
+  const [value, setValue] = useState<LineSelectorProps['lineNumber']>()
+  const debouncedSetLineNumber = useCallback(debounce(setLineNumber, 200), [setLineNumber])
 
-  const value = lineNumber ? lineNumber : ''
+  useLayoutEffect(() => {
+    setValue(lineNumber)
+  }, [])
 
   return (
     <TextField
       sx={{ width: INPUT_SIZE }}
       label={TEXTS.choose_line}
       type="number"
       value={value}
-      onChange={(e) => debouncedSetLineNumber(e.target.value)}
+      onChange={(e) => {
+        setValue(e.target.value)
+        debouncedSetLineNumber(e.target.value)
+      }}
       InputLabelProps={{
         shrink: true,
       }}