From 2cbd0a8ad4fe985b9da2beceaac13889f48a9280 Mon Sep 17 00:00:00 2001
From: Jandson Vitorino <jandson1512@gmail.com>
Date: Wed, 23 Aug 2023 16:51:51 -0300
Subject: [PATCH] Fixed #188 - it is now possible to delete all characters from
 the input alias with backspace

---
 frontend/components/newProduct/Step3.js | 33 ++++++++++++++-----------
 1 file changed, 19 insertions(+), 14 deletions(-)

diff --git a/frontend/components/newProduct/Step3.js b/frontend/components/newProduct/Step3.js
index b22213a..ede82c2 100644
--- a/frontend/components/newProduct/Step3.js
+++ b/frontend/components/newProduct/Step3.js
@@ -115,20 +115,9 @@ InputUcd.propTypes = {
 export function InputAlias({ pc, onChange, onChangeInputType }) {
   const [value, setValue] = useState(pc.alias !== null ? pc.alias : '')
 
-  // Using lodash debounce to Delay search by 600ms
-  // Exemplo: https://www.upbeatcode.com/react/how-to-use-lodash-in-react/
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const delayedEdit = useCallback(
-    debounce((pc, alias) => onChange(pc, alias), 600),
-    []
-  )
-
   const handleChange = e => {
     const inputValue = e.target.value
-    if (inputValue.trim() !== '') {
-      setValue(inputValue)
-      delayedEdit(pc, inputValue)
-    }
+    setValue(inputValue)
   }
 
   const handleClear = () => {
@@ -136,6 +125,22 @@ export function InputAlias({ pc, onChange, onChangeInputType }) {
     onChange(pc, null)
   }
 
+  // Using lodash debounce to Delay search by 800ms
+  // Exemplo: https://www.upbeatcode.com/react/how-to-use-lodash-in-react/
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const debouncedEdit = useCallback(
+    debounce(updatedValue => {
+      if (updatedValue.trim() !== '') {
+        onChange(pc, updatedValue)
+      }
+    }, 800),
+    []
+  )
+
+  useEffect(() => {
+    debouncedEdit(value)
+  }, [value, debouncedEdit])
+
   const handleChangeType = () => {
     onChangeInputType(pc.column_name)
   }
@@ -155,7 +160,7 @@ export function InputAlias({ pc, onChange, onChangeInputType }) {
               </InputAdornment>
             )
           }}
-        ></TextField>
+        />
         <IconButton onClick={handleChangeType}>
           <EditIcon color="primary" />
         </IconButton>
@@ -298,7 +303,7 @@ export default function NewProductStep3({ productId, onNext, onPrev }) {
     }
 
     // Campo de Texto para Alias
-    if (isInputTypeAlias(pc.column_name) === true) {
+    if (isInputTypeAlias(pc.column_name)) {
       return (
         <InputAlias
           pc={pc}