fix: fixing weird behaviors

bcgov · Sep 23, 2024 · 5f99fdd · 5f99fdd
1 parent ce1d768
commit 5f99fdd
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 37 deletions.
diff --git a/frontend/src/components/SeedlotRegistrationSteps/OrchardStep/OrchardWarnModal/index.tsx b/frontend/src/components/SeedlotRegistrationSteps/OrchardStep/OrchardWarnModal/index.tsx
@@ -9,12 +9,13 @@ interface OrchardWarnModalProps {
   open: boolean;
   setOpen: Function;
   confirmEdit: Function;
+  cancelEdit: Function;
   modalType: keyof orchardModalOptions;
 }
 
 const OrchardWarnModal = (
   {
-    open, setOpen, confirmEdit, modalType
+    open, setOpen, confirmEdit, modalType, cancelEdit
   }: OrchardWarnModalProps
 ) => (
   <Modal
@@ -25,6 +26,7 @@ const OrchardWarnModal = (
     secondaryButtonText={modalConfig[modalType].buttons.secondary}
     open={open}
     onRequestClose={() => {
+      cancelEdit();
       setOpen(false);
     }}
     onRequestSubmit={() => {

diff --git a/frontend/src/components/SeedlotRegistrationSteps/OrchardStep/index.tsx b/frontend/src/components/SeedlotRegistrationSteps/OrchardStep/index.tsx
@@ -67,6 +67,8 @@ const OrchardStep = ({
   const [modalType, setModalType] = useState<keyof orchardModalOptions>('change');
   // Store the orchard selection until the user has confirmed the warning modal
   const [stagedOrchard, setStagedOrchard] = useState<OptionsInputType | null>(null);
+  const [forceUpdatePrimary, setForceUpdatePrimary] = useState<number>(0);
+  const [forceUpdateSecondary, setForceUpdateSecondary] = useState<number>(0);
 
   const gameticMethodologyQuery = useQuery({
     queryKey: ['gametic-methodologies'],
@@ -187,12 +189,23 @@ const OrchardStep = ({
         orchards
       }
     );
+
+    if (isPrimary) {
+      setForceUpdatePrimary((prev) => prev + 1);
+    } else {
+      setForceUpdateSecondary((prev) => prev + 1);
+    }
   };
 
   // Remove options that are already selected by a user
-  const filterOrchardOptions = (codeToFilter: string) => orchardQuery.data?.filter(
-    (orchards) => orchards.code !== codeToFilter
-  );
+  const filterOrchardOpts = (codeToFilter: string) => {
+    if (orchardQuery.data) {
+      return orchardQuery.data.filter(
+        (orchards) => orchards.code !== codeToFilter
+      );
+    }
+    return [];
+  };
 
   const isTableEmpty = Object.keys(tableRowData).length === 0;
 
@@ -209,6 +222,18 @@ const OrchardStep = ({
     }
   };
 
+  const cancelEdit = () => {
+    if (modalType === 'change' && stagedOrchard) {
+      const value = stagedOrchard.id === state.orchards.primaryOrchard.id
+        ? state.orchards.primaryOrchard.value
+        : state.orchards.secondaryOrchard.value;
+      setOrchard(
+        stagedOrchard.id === state.orchards.primaryOrchard.id,
+        value
+      );
+    }
+  };
+
   const renderOrchardButtons = () => {
     if (!isFormSubmitted && !isReview) {
       return state.orchards.secondaryOrchard.enabled
@@ -293,13 +318,14 @@ const OrchardStep = ({
                 <>
                   <ComboBox
                     id={state.orchards.primaryOrchard.id}
+                    key={forceUpdatePrimary}
                     placeholder={orchardStepText.orchardSection.orchardInput.placeholder}
                     items={
                       orchardQuery.status === 'success'
-                        ? filterOrchardOptions(state.orchards.secondaryOrchard.value.code)
+                        ? filterOrchardOpts(state.orchards.secondaryOrchard.value.code)
                         : []
                     }
-                    selectedItem={state.orchards.primaryOrchard.value}
+                    initialSelectedItem={state.orchards.primaryOrchard.value}
                     titleText={
                       orchardStepText.orchardSection.orchardInput.label
                     }
@@ -318,20 +344,6 @@ const OrchardStep = ({
                         } else setOrchard(true, e.selectedItem);
                       }
                     }
-                    // This event is necessary to track the changes when cleaning the combobox
-                    // i.e. when the user clicks on the small 'X' when there is an orchard selected
-                    onInputChange={
-                      (inputText: string) => {
-                        if (inputText === '' && !isTableEmpty) {
-                          setModalType('change');
-                          setStagedOrchard({
-                            ...state.orchards.primaryOrchard,
-                            value: EmptyMultiOptObj
-                          });
-                          setModalOpen(true);
-                        }
-                      }
-                    }
                     readOnly={isFormSubmitted || isReview}
                   />
                   {
@@ -362,13 +374,14 @@ const OrchardStep = ({
                   <>
                     <ComboBox
                       id={state.orchards.secondaryOrchard.id}
+                      key={forceUpdateSecondary}
                       placeholder={orchardStepText.orchardSection.orchardInput.placeholder}
                       items={
                         orchardQuery.status === 'success'
-                          ? filterOrchardOptions(state.orchards.primaryOrchard.value.code)
+                          ? filterOrchardOpts(state.orchards.primaryOrchard.value.code)
                           : []
                       }
-                      selectedItem={state.orchards.secondaryOrchard.value}
+                      initialSelectedItem={state.orchards.secondaryOrchard.value}
                       titleText={
                         orchardStepText.orchardSection.orchardInput.secondaryLabel
                       }
@@ -387,21 +400,6 @@ const OrchardStep = ({
                           } else setOrchard(false, e.selectedItem);
                         }
                       }
-                      // This event is necessary to track the changes when cleaning the combobox
-                      // i.e. when the user clicks on the small 'X' when there is an
-                      // orchard selected
-                      onInputChange={
-                        (inputText: string) => {
-                          if (inputText === '' && !isTableEmpty) {
-                            setModalType('change');
-                            setStagedOrchard({
-                              ...state.orchards.primaryOrchard,
-                              value: EmptyMultiOptObj
-                            });
-                            setModalOpen(true);
-                          }
-                        }
-                      }
                       readOnly={isFormSubmitted || isReview}
                     />
                     {
@@ -490,6 +488,7 @@ const OrchardStep = ({
                   onChange={(e: ComboBoxEvent) => setGametic(e, true)}
                   readOnly={isFormSubmitted && !isReview}
                   selectedItem={state.femaleGametic.value}
+                  initialSelectedItem={state.femaleGametic.value}
                 />
               )
           }
@@ -516,6 +515,7 @@ const OrchardStep = ({
                   onChange={(e: ComboBoxEvent) => setGametic(e, false)}
                   readOnly={isFormSubmitted && !isReview}
                   selectedItem={state.maleGametic.value}
+                  initialSelectedItem={state.maleGametic.value}
                 />
               )
           }
@@ -669,6 +669,7 @@ const OrchardStep = ({
         setOpen={setModalOpen}
         modalType={modalType}
         confirmEdit={proceedEdit}
+        cancelEdit={cancelEdit}
       />
     </FlexGrid>
   );