Biz/dj 2813 support custom input strings in connect react (#15356)

* Add support for custom string input

* Add support for custom string input

* Bump version and update changelog

Author: bzwrk

packages/connect-react/CHANGELOG.md

@@ -1,6 +1,10 @@
 <!-- markdownlint-disable MD024 -->
 # Changelog
 
+# [1.0.0-preview.22] - 2025-01-21
+
+- Allow custom string input for remote options
+
 # [1.0.0-preview.21] - 2025-01-17
 
 - Fix a bug in async prop value validation when the prop is a string

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

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

packages/connect-react/package.json

@@ -96,6 +96,14 @@ export function ControlSelect<T>({
       MenuList: LoadMore,
     }
   }
+
+  const handleCreate = (inputValue: string) => {
+    options.unshift({
+      label: inputValue,
+      value: inputValue,
+    })
+  };
+
   const MaybeCreatableSelect = isCreatable
     ? CreatableSelect
     : Select;
@@ -110,6 +118,7 @@ export function ControlSelect<T>({
       required={!prop.optional}
       {...props}
       {...selectProps}
+      onCreateOption={handleCreate}
       onChange={(o) => {
         if (o) {
           if (Array.isArray(o)) {

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

@@ -185,6 +185,7 @@ export function RemoteOptionsContainer({ queryEnabled }: RemoteOptionsContainerP
 
   return (
     <ControlSelect
+      isCreatable={true}
       showLoadMoreButton={showLoadMoreButton()}
       onLoadMore={onLoadMore}
       options={pageable.data}