From 4670e2fe0c0d3470ea9c9c951650f7ddeb77062c Mon Sep 17 00:00:00 2001
From: Ali BARIN <ali.barin53@gmail.com>
Date: Wed, 19 Oct 2022 19:59:10 +0200
Subject: [PATCH] fix: reset field when its deps are not satisfied

---
 .../ControlledAutocomplete/index.tsx          | 20 ++++++++++++++++++-
 .../web/src/components/InputCreator/index.tsx |  2 ++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/packages/web/src/components/ControlledAutocomplete/index.tsx b/packages/web/src/components/ControlledAutocomplete/index.tsx
index f7ab33f6..a79b2f7f 100644
--- a/packages/web/src/components/ControlledAutocomplete/index.tsx
+++ b/packages/web/src/components/ControlledAutocomplete/index.tsx
@@ -9,12 +9,13 @@ interface ControlledAutocompleteProps extends AutocompleteProps<IFieldDropdownOp
   name: string;
   required?: boolean;
   description?: string;
+  dependsOn?: string[];
 }
 
 const getOption = (options: readonly IFieldDropdownOption[], value: string) => options.find(option => option.value === value) || null;
 
 function ControlledAutocomplete(props: ControlledAutocompleteProps): React.ReactElement {
-  const { control } = useFormContext();
+  const { control, watch, setValue, resetField } = useFormContext();
 
   const {
     required = false,
@@ -25,9 +26,26 @@ function ControlledAutocomplete(props: ControlledAutocompleteProps): React.React
     onChange,
     description,
     options = [],
+    dependsOn = [],
     ...autocompleteProps
   } = props;
 
+  let dependsOnValues: unknown[] = [];
+  if (dependsOn?.length) {
+    dependsOnValues = watch(dependsOn);
+  }
+
+  React.useEffect(() => {
+    const hasDependencies = dependsOnValues.length;
+    const allDepsSatisfied = dependsOnValues.every(Boolean);
+
+    if (hasDependencies && !allDepsSatisfied) {
+      // Reset the field if any dependency is not satisfied
+      setValue(name, null);
+      resetField(name);
+    }
+  }, dependsOnValues);
+
   return (
     <Controller
       rules={{ required }}
diff --git a/packages/web/src/components/InputCreator/index.tsx b/packages/web/src/components/InputCreator/index.tsx
index ced9757e..d2a1456e 100644
--- a/packages/web/src/components/InputCreator/index.tsx
+++ b/packages/web/src/components/InputCreator/index.tsx
@@ -44,6 +44,7 @@ export default function InputCreator(props: InputCreatorProps): React.ReactEleme
     clickToCopy,
     variables,
     type,
+    dependsOn,
   } = schema;
 
   const { data, loading } = useDynamicData(stepId, schema);
@@ -55,6 +56,7 @@ export default function InputCreator(props: InputCreatorProps): React.ReactEleme
     return (
       <ControlledAutocomplete
         name={computedName}
+        dependsOn={dependsOn}
         fullWidth
         disablePortal
         disableClearable={required}