From 13a91b0ba92683a333450b964c88223855b44526 Mon Sep 17 00:00:00 2001
From: Marco Escaleira <marcoescaleira2000@gmail.com>
Date: Tue, 5 Mar 2024 19:33:37 +0000
Subject: [PATCH] feat: allowing tags update to happen

---
 src/components/Quiz/QuizForm.tsx       |  2 --
 src/components/TagsInput/TagsInput.tsx | 13 +++++++++++--
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/Quiz/QuizForm.tsx b/src/components/Quiz/QuizForm.tsx
index 7bab68a..935ab9d 100644
--- a/src/components/Quiz/QuizForm.tsx
+++ b/src/components/Quiz/QuizForm.tsx
@@ -107,8 +107,6 @@ export function QuizForm() {
     }
   };
 
-  console.log(getValues("tags"));
-
   return (
     <FormProvider {...form}>
       <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-4">
diff --git a/src/components/TagsInput/TagsInput.tsx b/src/components/TagsInput/TagsInput.tsx
index 879881e..85b379d 100644
--- a/src/components/TagsInput/TagsInput.tsx
+++ b/src/components/TagsInput/TagsInput.tsx
@@ -1,4 +1,4 @@
-import { FC, useState } from "react";
+import { FC, useEffect, useState } from "react";
 import { Typography } from "@material-tailwind/react";
 import { useFormContext } from "react-hook-form";
 import TagsInputComp from "react-tagsinput";
@@ -13,7 +13,16 @@ type TagsInputProps = {
 
 export const TagsInput: FC<TagsInputProps> = ({ name, label }) => {
   const { register, setValue, getValues } = useFormContext();
-  const [tags, setTags] = useState<string[]>(getValues(name));
+  const [hasSetTags, setHasSetTags] = useState(false);
+  const formTags: string[] = getValues(name);
+  const [tags, setTags] = useState(formTags);
+
+  useEffect(() => {
+    if (!hasSetTags && tags.length === 0 && formTags.length > 0) {
+      setTags(formTags);
+      setHasSetTags(true);
+    }
+  }, [hasSetTags, getValues(name)]);
 
   return (
     <div>