From ecca2b765091a8239603862168be3b518cfcfe11 Mon Sep 17 00:00:00 2001
From: kostasdano <kostas.danochristos@orfium.com>
Date: Thu, 7 Dec 2023 01:59:13 +0200
Subject: [PATCH 1/2] fix: multi textfield state

---
 .../TextField/hooks/useMultiTextFieldUtils.ts          | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/TextField/hooks/useMultiTextFieldUtils.ts b/src/components/TextField/hooks/useMultiTextFieldUtils.ts
index e65423e13..4d25372fa 100644
--- a/src/components/TextField/hooks/useMultiTextFieldUtils.ts
+++ b/src/components/TextField/hooks/useMultiTextFieldUtils.ts
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 
 import { Props as TextFieldProps } from '../TextField';
 
@@ -25,6 +25,10 @@ const useMultiTextFieldUtils = ({
   const [values, setValues] = useState(multiValues);
   const [inputValue, setInputValue] = useState('');
 
+  useEffect(() => {
+    setValues(multiValues);
+  }, [multiValues]);
+
   const handleValueDelete = (option?: string) => {
     if (option) {
       setValues(values.filter((opt) => opt !== option));
@@ -35,6 +39,10 @@ const useMultiTextFieldUtils = ({
       if (values.length > 0) {
         const lastItem = values[values.length - 1];
         setValues(values.filter((opt) => opt !== lastItem));
+
+        if (onMultiValueDelete) {
+          onMultiValueDelete(lastItem);
+        }
       }
     }
   };

From f773d51455abf7cdcb1d151c89ce6015537d6ac6 Mon Sep 17 00:00:00 2001
From: kostasdano <kostas.danochristos@orfium.com>
Date: Thu, 7 Dec 2023 16:43:31 +0200
Subject: [PATCH 2/2] fix: tests

---
 src/components/TextField/TextField.tsx                   | 1 +
 src/components/TextField/hooks/useMultiTextFieldUtils.ts | 8 ++++++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/TextField/TextField.tsx b/src/components/TextField/TextField.tsx
index ce0d66ac5..36fe79655 100644
--- 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
index 4d25372fa..9b71795af 100644
--- a/src/components/TextField/hooks/useMultiTextFieldUtils.ts
+++ b/src/components/TextField/hooks/useMultiTextFieldUtils.ts
@@ -4,6 +4,7 @@ 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,
@@ -26,8 +28,10 @@ const useMultiTextFieldUtils = ({
   const [inputValue, setInputValue] = useState('');
 
   useEffect(() => {
-    setValues(multiValues);
-  }, [multiValues]);
+    if (multi) {
+      setValues(multiValues);
+    }
+  }, [multiValues, multi]);
 
   const handleValueDelete = (option?: string) => {
     if (option) {