From ea4af5e09c4ba1eb03977d2082a33616d49fd5a5 Mon Sep 17 00:00:00 2001
From: faisolavolut <faisol@avolut.com>
Date: Fri, 28 Feb 2025 15:29:33 +0700
Subject: [PATCH] fix: streamline tag management in TypeTag component by
 removing unnecessary useEffect hooks

---
 components/form/field/TypeTag.tsx | 25 ++++++++++---------------
 1 file changed, 10 insertions(+), 15 deletions(-)

diff --git a/components/form/field/TypeTag.tsx b/components/form/field/TypeTag.tsx
index 2641dd7..87fffdd 100644
--- a/components/form/field/TypeTag.tsx
+++ b/components/form/field/TypeTag.tsx
@@ -1,5 +1,4 @@
-import { useEffect, useRef, useState } from "react";
-import get from "lodash.get";
+import { useRef, useState } from "react";
 
 export const TypeTag: React.FC<any> = ({
   name,
@@ -11,24 +10,12 @@ export const TypeTag: React.FC<any> = ({
   field,
   onChange,
 }) => {
-  const [tags, setTags] = useState<string[]>([]);
+  const [tags, setTags] = useState<string[]>(fm.data?.[name] || []);
   const [inputValue, setInputValue] = useState("");
   const [editingIndex, setEditingIndex] = useState<number | null>(null); // Index tag yang sedang diedit
   const [tempValue, setTempValue] = useState<string>(""); // Nilai sementara untuk pengeditan
   const tagRefs = useRef<(HTMLDivElement | null)[]>([]);
   const val = fm?.data?.[name];
-  useEffect(() => {
-    if (get(fm, `data.[${name}].length`)) {
-      setTags(fm.data?.[name]);
-    }
-  }, [val]);
-  useEffect(() => {
-    fm.data[name] = tags;
-    fm.render();
-    if (typeof onChange === "function") {
-      onChange(tags);
-    }
-  }, [inputValue]);
   const handleSaveEdit = (index: number) => {
     if (!disabled) return;
     const updatedTags = [...tags];
@@ -36,6 +23,9 @@ export const TypeTag: React.FC<any> = ({
     setTags(updatedTags);
     setEditingIndex(null); // Keluar dari mode edit
     setTempValue(""); // Reset nilai sementara
+
+    fm.data[name] = updatedTags;
+    fm.render();
     if (typeof onChange === "function") {
       onChange(tags);
     }
@@ -51,6 +41,11 @@ export const TypeTag: React.FC<any> = ({
       e.stopPropagation();
       setTags([...tags, inputValue]);
       setInputValue("");
+      fm.data[name] = [...tags, inputValue];
+      fm.render();
+      if (typeof onChange === "function") {
+        onChange(tags);
+      }
     } else if (e.key === "Backspace" && !inputValue && tags.length > 0) {
       setTags(tags.slice(0, -1));
     }