Biz/dj 2825 remote options gets unset when loading configuredprops (#15401)

* Refactor ControlSelect to fix custom string input

* Fix custom string input state update

* Populate prev value of remote options on page load

* Pass prevValues to RemoteOptionsContainer

* Update package

* Pass prevValues to RemoteOptionsContainer

* Ensure propsNeedConfiguring is updated after field registration

* Remove checkPropsNeedConfiguring call

* Cleanup

* Cleanup

* Update version and changelog

* Commit pnpm-lock.yaml

* Remove unused prevValue

Author: bzwrk

packages/connect-react/CHANGELOG.md

@@ -1,6 +1,12 @@
 <!-- markdownlint-disable MD024 -->
 # Changelog
 
+# [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
+- Fix custom string input for remote options
+- Fix the reloading of a previously selected remote option when re-rendering the form component
+
 # [1.0.0-preview.23] - 2025-01-22
 
 - Show the prop label instead of the value after selecting from a dropdown for string array props

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

@@ -1,6 +1,6 @@
 {
   "name": "@pipedream/connect-react",
-  "version": "1.0.0-preview.23",
+  "version": "1.0.0-preview.24",
   "description": "Pipedream Connect library for React",
   "files": [
     "dist"

packages/connect-react/package.json

@@ -1,4 +1,7 @@
-import { useMemo } from "react";
+import {
+  useEffect,
+  useMemo, useState,
+} from "react";
 import Select, {
   Props as ReactSelectProps, components,
 } from "react-select";
@@ -28,6 +31,26 @@ export function ControlSelect<T>({
   const {
     select, theme,
   } = useCustomize();
+  const [
+    selectOptions,
+    setSelectOptions,
+  ] = useState(options);
+  const [
+    rawValue,
+    setRawValue,
+  ] = useState(value);
+
+  useEffect(() => {
+    setSelectOptions(options)
+  }, [
+    options,
+  ])
+
+  useEffect(() => {
+    setRawValue(value)
+  }, [
+    value,
+  ])
 
   const baseSelectProps: BaseReactSelectProps<never, never, never> = {
     styles: {
@@ -40,7 +63,7 @@ export function ControlSelect<T>({
   };
 
   const selectValue = useMemo(() => {
-    let ret = value;
+    let ret = rawValue;
     if (ret != null) {
       if (Array.isArray(ret)) {
         // if simple, make lv (XXX combine this with other place this happens)
@@ -51,7 +74,7 @@ export function ControlSelect<T>({
               label: o,
               value: o,
             }
-            for (const item of options) {
+            for (const item of selectOptions) {
               if (item.value === o) {
                 obj = item;
                 break;
@@ -62,23 +85,28 @@ export function ControlSelect<T>({
           ret = lvs;
         }
       } else if (typeof ret !== "object") {
-        const lvOptions = options?.[0] && typeof options[0] === "object";
+        const lvOptions = selectOptions?.[0] && typeof selectOptions[0] === "object";
         if (lvOptions) {
-          for (const item of options) {
-            if (item.value === value) {
+          for (const item of selectOptions) {
+            if (item.value === rawValue) {
               ret = item;
               break;
             }
           }
+        } else {
+          ret = {
+            label: rawValue,
+            value: rawValue,
+          }
         }
       } else if (ret.__lv) {
         ret = ret.__lv
       }
     }
     return ret;
   }, [
-    value,
-    options,
+    rawValue,
+    selectOptions,
   ]);
 
   const LoadMore = ({
@@ -105,58 +133,94 @@ export function ControlSelect<T>({
   }
 
   const handleCreate = (inputValue: string) => {
-    options.unshift({
-      label: inputValue,
-      value: inputValue,
-    })
+    const createOption = (input: unknown) => {
+      if (typeof input === "object") return input
+      return {
+        label: input,
+        value: input,
+      }
+    }
+    const newOption = createOption(inputValue)
+    let newRawValue = newOption
+    const newSelectOptions = selectOptions
+      ? [
+        newOption,
+        ...selectOptions,
+      ]
+      : [
+        newOption,
+      ]
+    setSelectOptions(newSelectOptions);
+    if (prop.type.endsWith("[]")) {
+      if (Array.isArray(rawValue)) {
+        newRawValue = [
+          ...rawValue.map(createOption),
+          newOption,
+        ]
+      } else {
+        newRawValue = [
+          newOption,
+        ]
+      }
+    }
+    setRawValue(newRawValue)
+    handleChange(newRawValue)
   };
 
+  const handleChange = (o: unknown) => {
+    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);
+        }
+      } else {
+        throw new Error("unhandled option type"); // TODO
+      }
+    } else {
+      onChange(undefined);
+    }
+  }
+
+  const additionalProps = {
+    onCreateOption: prop.remoteOptions
+      ? handleCreate
+      : undefined,
+  }
+
   const MaybeCreatableSelect = isCreatable
     ? CreatableSelect
     : Select;
   return (
     <MaybeCreatableSelect
       inputId={id}
       instanceId={id}
-      options={options}
+      options={selectOptions}
       value={selectValue}
       isMulti={prop.type.endsWith("[]")}
       isClearable={true}
       required={!prop.optional}
       {...props}
       {...selectProps}
-      onCreateOption={handleCreate}
-      onChange={(o) => {
-        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);
-            }
-          } else {
-            throw new Error("unhandled option type"); // TODO
-          }
-        } else {
-          onChange(undefined);
-        }
-      }}
+      {...additionalProps}
+      onChange={handleChange}
     />
   );
 }