Biz/dj 2837 show label and keep selected remote option dropdown enabled (#15438)

* Always show labels on dynamic props

* Update version to 1.0.0-preview.25

* Add comment to useEffect

* Handle propsNeedConfiguring on field registration

* Cleanup

Author: bzwrk

packages/connect-react/CHANGELOG.md

@@ -1,6 +1,11 @@
 <!-- markdownlint-disable MD024 -->
 # Changelog
 
+# [1.0.0-preview.25] - 2025-01-28
+
+- Show prop labels instead of values after selecting dynamic props
+- Fix the bug where a remote option would not be reloaded when the form component is re-rendered
+
 # [1.0.0-preview.24] - 2025-01-24
 
 - Fix the bug where inputting multiple strings into an array prop would merge the strings into one

packages/connect-react/examples/nextjs/package-lock.json

@@ -171,26 +171,16 @@ export function ControlSelect<T>({
     if (o) {
       if (Array.isArray(o)) {
         if (typeof o[0] === "object" && "value" in o[0]) {
-          const vs = [];
-          for (const _o of o) {
-            if (prop.withLabel) {
-              vs.push(_o);
-            } else {
-              vs.push(_o.value);
-            }
-          }
-          onChange(vs);
-        } else {
-          onChange(o);
-        }
-      } else if (typeof o === "object" && "value" in o) {
-        if (prop.withLabel) {
           onChange({
             __lv: o,
           });
         } else {
-          onChange(o.value);
+          onChange(o);
         }
+      } else if (typeof o === "object" && "value" in o) {
+        onChange({
+          __lv: o,
+        });
       } else {
         throw new Error("unhandled option type"); // TODO
       }

packages/connect-react/src/components/ControlSelect.tsx

@@ -13,6 +13,7 @@ import {
   appPropErrors, arrayPropErrors, booleanPropErrors, integerPropErrors,
   stringPropErrors,
 } from "../utils/component";
+import _ from "lodash";
 
 export type DynamicProps<T extends ConfigurableProps> = { id: string; configurableProps: T; }; // TODO
 
@@ -254,6 +255,15 @@ export const FormContextProvider = <T extends ConfigurableProps>({
     setErrors(_errors);
   };
 
+  useEffect(() => {
+    // Initialize queryDisabledIdx on load so that we don't force users
+    // to reconfigure a prop they've already configured whenever the page
+    // or component is reloaded
+    updateConfiguredPropsQueryDisabledIdx(_configuredProps)
+  }, [
+    _configuredProps,
+  ]);
+
   useEffect(() => {
     const newConfiguredProps: ConfiguredProps<T> = {};
     for (const prop of configurableProps) {
@@ -365,6 +375,15 @@ export const FormContextProvider = <T extends ConfigurableProps>({
       }
     }
     // propsNeedConfiguring.splice(0, propsNeedConfiguring.length, ..._propsNeedConfiguring)
+
+    // Prevent useEffect/useState infinite loop by updating
+    // propsNeedConfiguring only if there is an actual change to the list of
+    // props that need to be configured.
+    // NB: The infinite loop is triggered because of calling
+    // checkPropsNeedConfiguring() from registerField, which is called
+    // from inside useEffect.
+    if (_propsNeedConfiguring && propsNeedConfiguring && _.isEqual(_propsNeedConfiguring, propsNeedConfiguring)) return;
+
     setPropsNeedConfiguring(_propsNeedConfiguring)
   }
 
@@ -373,6 +392,7 @@ export const FormContextProvider = <T extends ConfigurableProps>({
       fields[field.prop.name] = field
       return fields
     });
+    checkPropsNeedConfiguring()
   };
 
   // console.log("***", configurableProps, configuredProps)

packages/connect-react/src/hooks/form-context.tsx

@@ -40,6 +40,9 @@ export function valuesFromOptions<T>(value: unknown | T[] | PropOptions<T>): T[]
     }
     return results
   }
+  if (value && typeof value === "object" && Array.isArray(value.__lv)) {
+    return value.__lv as T[]
+  }
   if (!Array.isArray(value))
     return []
   return value as T[]