🪟 🐛 Properly update builder fields when values change (#10097)

airbyte-webapp/src/components/connectorBuilder/Builder/BuilderField.tsx

@@ -1,7 +1,7 @@
 import isEqual from "lodash/isEqual";
 import toPath from "lodash/toPath";
 import { ReactNode, useEffect, useRef } from "react";
-import { useController } from "react-hook-form";
+import { useController, useWatch } from "react-hook-form";
 import { FormattedMessage } from "react-intl";
 import { Rnd } from "react-rnd";
 
@@ -135,6 +135,9 @@ const InnerBuilderField: React.FC<BuilderFieldProps> = ({
   ...props
 }) => {
   const { field, fieldState } = useController({ name: path });
+  // Must use useWatch instead of field.value from useController because the latter is not updated
+  // when setValue is called on a parent path in a way that changes the value of this field.
+  const fieldValue = useWatch({ name: path });
   const hasError = !!fieldState.error;
 
   const { label, tooltip } = getLabelAndTooltip(
@@ -163,7 +166,7 @@ const InnerBuilderField: React.FC<BuilderFieldProps> = ({
           // Call handler in here to make sure it handles new refs
           handleScrollToField(elementRef, path, scrollToField, setScrollToField);
         }}
-        checked={field.value as boolean}
+        checked={fieldValue as boolean}
         label={
           <>
             {label} {tooltip && <InfoTooltip placement="top-start">{tooltip}</InfoTooltip>}
@@ -207,7 +210,7 @@ const InnerBuilderField: React.FC<BuilderFieldProps> = ({
           }}
           className={props.className}
           type={props.type}
-          value={(field.value as string | number | undefined) ?? ""}
+          value={(fieldValue as string | number | undefined) ?? ""}
           error={hasError}
           readOnly={readOnly}
           adornment={adornment}
@@ -223,7 +226,7 @@ const InnerBuilderField: React.FC<BuilderFieldProps> = ({
           error={hasError}
           withTime={props.type === "date-time"}
           onChange={setValue}
-          value={(field.value as string) ?? ""}
+          value={(fieldValue as string) ?? ""}
           onBlur={field.onBlur}
         />
       )}
@@ -234,7 +237,7 @@ const InnerBuilderField: React.FC<BuilderFieldProps> = ({
             setValue(e.target.value);
           }}
           className={props.className}
-          value={(field.value as string) ?? ""}
+          value={(fieldValue as string) ?? ""}
           error={hasError}
           readOnly={readOnly}
           onBlur={field.onBlur}
@@ -266,7 +269,7 @@ const InnerBuilderField: React.FC<BuilderFieldProps> = ({
             <CodeEditor
               key={path}
               automaticLayout
-              value={field.value || ""}
+              value={fieldValue || ""}
               language="json"
               onChange={(val: string | undefined) => {
                 setValue(val);
@@ -279,7 +282,7 @@ const InnerBuilderField: React.FC<BuilderFieldProps> = ({
         <div data-testid={`tag-input-${path}`}>
           <ArrayField
             name={path}
-            value={(field.value as string[] | undefined) ?? []}
+            value={(fieldValue as string[] | undefined) ?? []}
             itemType={props.itemType}
             setValue={setValue}
             error={hasError}
@@ -290,7 +293,7 @@ const InnerBuilderField: React.FC<BuilderFieldProps> = ({
       {props.type === "enum" && (
         <EnumField
           options={props.options}
-          value={field.value as string}
+          value={fieldValue as string}
           setValue={setValue}
           error={hasError}
           data-testid={path}
@@ -299,7 +302,7 @@ const InnerBuilderField: React.FC<BuilderFieldProps> = ({
       {props.type === "combobox" && (
         <ComboBox
           options={props.options}
-          value={field.value as string}
+          value={fieldValue as string}
           onChange={setValue}
           error={hasError}
           adornment={adornment}
@@ -318,7 +321,7 @@ const InnerBuilderField: React.FC<BuilderFieldProps> = ({
         <MultiComboBox
           name={path}
           options={props.options}
-          value={field.value as string[]}
+          value={fieldValue as string[]}
           onChange={setValue}
           error={hasError}
           data-testid={path}