feat: allowing tags update to happen

MarcoEscaleira · Mar 5, 2024 · 13a91b0 · 13a91b0
1 parent 16635b5
commit 13a91b0
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git 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
@@ -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>