From 0916be0e6e3e409f68456ded97c7a0d2ae8e66ef Mon Sep 17 00:00:00 2001
From: ArkadiK94 <arkadi29081994@gmail.com>
Date: Sat, 16 Sep 2023 14:29:23 +0300
Subject: [PATCH] fix:debounce bug

---
 src/pages/components/LineSelector.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/pages/components/LineSelector.tsx b/src/pages/components/LineSelector.tsx
index 61adde4d..756b4eed 100644
--- 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,9 +10,12 @@ 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
@@ -20,7 +23,10 @@ const LineSelector = ({ lineNumber, setLineNumber }: LineSelectorProps) => {
       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,
       }}