Merge pull request #743 from Orfium/fix/NDS-880_multi_text_field_stat…

…e_v4 fix: multi textfield state
Orfium · Dec 8, 2023 · e254cab · e254cab
2 parents 0bf789e + f773d51
commit e254cab
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/src/components/TextField/TextField.tsx b/src/components/TextField/TextField.tsx
@@ -115,6 +115,7 @@ const TextField = React.forwardRef<HTMLInputElement, Props & InputProps & TestPr
       handleKeyDown,
       handleTyping,
     } = useMultiTextFieldUtils({
+      multi,
       multiValues,
       maxMultiValues,
       onMultiValueCreate,

diff --git a/src/components/TextField/hooks/useMultiTextFieldUtils.ts b/src/components/TextField/hooks/useMultiTextFieldUtils.ts
@@ -1,9 +1,10 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 
 import { Props as TextFieldProps } from '../TextField';
 
 type Props = Pick<
   TextFieldProps,
+  | 'multi'
   | 'multiValues'
   | 'maxMultiValues'
   | 'onMultiValueCreate'
@@ -14,6 +15,7 @@ type Props = Pick<
 >;
 
 const useMultiTextFieldUtils = ({
+  multi,
   multiValues = [],
   maxMultiValues,
   onMultiValueCreate,
@@ -25,6 +27,12 @@ const useMultiTextFieldUtils = ({
   const [values, setValues] = useState(multiValues);
   const [inputValue, setInputValue] = useState('');
 
+  useEffect(() => {
+    if (multi) {
+      setValues(multiValues);
+    }
+  }, [multiValues, multi]);
+
   const handleValueDelete = (option?: string) => {
     if (option) {
       setValues(values.filter((opt) => opt !== option));
@@ -35,6 +43,10 @@ const useMultiTextFieldUtils = ({
       if (values.length > 0) {
         const lastItem = values[values.length - 1];
         setValues(values.filter((opt) => opt !== lastItem));
+
+        if (onMultiValueDelete) {
+          onMultiValueDelete(lastItem);
+        }
       }
     }
   };