From 5e64d855407e664b357df0a51a321e4119723079 Mon Sep 17 00:00:00 2001
From: Wayne <wayne.lee@2fi-solutions.com.hk>
Date: Mon, 18 Mar 2024 11:18:04 +0900
Subject: [PATCH] Fix create task template

---
 .../CreateTaskTemplate/CreateTaskTemplate.tsx      | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/CreateTaskTemplate/CreateTaskTemplate.tsx b/src/components/CreateTaskTemplate/CreateTaskTemplate.tsx
index 2f5543e..066c994 100644
--- a/src/components/CreateTaskTemplate/CreateTaskTemplate.tsx
+++ b/src/components/CreateTaskTemplate/CreateTaskTemplate.tsx
@@ -48,8 +48,14 @@ const CreateTaskTemplate: React.FC<Props> = ({ tasks }) => {
     register,
     handleSubmit,
     setValue,
+    watch,
     formState: { errors, isSubmitting },
-  } = useForm<NewTaskTemplateFormInputs>();
+  } = useForm<NewTaskTemplateFormInputs>({ defaultValues: { taskIds: [] } });
+
+  const currentTaskIds = watch("taskIds");
+  const selectedItems = React.useMemo(() => {
+    return items.filter((item) => currentTaskIds.includes(item.id));
+  }, [currentTaskIds, items]);
 
   const onSubmit: SubmitHandler<NewTaskTemplateFormInputs> = React.useCallback(
     async (data) => {
@@ -100,11 +106,11 @@ const CreateTaskTemplate: React.FC<Props> = ({ tasks }) => {
           </Grid>
           <TransferList
             allItems={items}
-            initiallySelectedItems={[]}
-            onChange={(selectedItems) => {
+            selectedItems={selectedItems}
+            onChange={(selectedTasks) => {
               setValue(
                 "taskIds",
-                selectedItems.map((item) => item.id),
+                selectedTasks.map((item) => item.id),
               );
             }}
             allItemsLabel={t("Task Pool")}