fix: reset field when its deps are not satisfied

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 }}

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}