z-index fixes for dropdowns in connect-react (#19326)

* z-index fixes for dropdowns

* linting fixes

* PR feedback

* version and changelog

* Update ControlSelect.tsx

* Update ControlSelect.tsx

Author: dannyroosevelt

packages/connect-react/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 # Changelog
 
+## [2.2.0] - 2025-11-29
+
+### Added
+
+- Added React 19 support to peer dependencies
+
+### Fixed
+
+- Fixed dropdown menus being clipped or hidden behind other elements when rendered inside containers with overflow constraints (e.g., workflow builders, modals)
+- All select components now portal their menus to the document body with proper z-index handling
+
+### Changed
+
+- Upgraded `react-select` from 5.8.2 to 5.9.0 for React 19 compatibility
+
 ## [2.1.2] - 2025-11-14
 
 ### Fixed

packages/connect-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pipedream/connect-react",
-  "version": "2.1.2",
+  "version": "2.2.0",
   "description": "Pipedream Connect library for React",
   "files": [
     "dist"
@@ -34,7 +34,7 @@
     "@tanstack/react-query": "^5.59.16",
     "lodash.isequal": "^4.5.0",
     "react-markdown": "^9.0.1",
-    "react-select": "^5.8.2"
+    "react-select": "^5.9.0"
   },
   "devDependencies": {
     "@emotion/react": "^11.13.5",
@@ -44,7 +44,7 @@
     "vite-plugin-dts": "^4.3.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   }
 }

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

@@ -146,44 +146,62 @@ export function ControlApp({ app }: ControlAppProps) {
       app,
       ...formFieldCtx,
     })}>
-      {isLoadingAccounts ?
-        `Loading ${app.name} accounts...`
-        : accounts.length ?
-          <Select
-            instanceId={id}
-            value={selectValue}
-            options={selectOptions}
-            {...selectProps}
-            required={true}
-            placeholder={`Select ${app.name} account...`}
-            isLoading={isLoadingAccounts}
-            isClearable={true}
-            isSearchable={true}
-            getOptionLabel={(a) => a.name ?? ""}
-            getOptionValue={(a) => a.id}
-            onChange={(a) => {
-              if (a) {
-                if (a.id === "_new") {
-                  // start connect account and then select it, etc.
-                  // TODO unset / put in loading state
-                  startConnectAccount();
+      {isLoadingAccounts
+        ? `Loading ${app.name} accounts...`
+        : accounts.length
+          ? (
+            <Select
+              instanceId={id}
+              value={selectValue}
+              options={selectOptions}
+              {...selectProps}
+              // These must come AFTER selectProps spread to avoid being overridden
+              classNamePrefix="react-select"
+              required={true}
+              placeholder={`Select ${app.name} account...`}
+              isLoading={isLoadingAccounts}
+              isClearable={true}
+              isSearchable={true}
+              getOptionLabel={(a) => a.name ?? ""}
+              getOptionValue={(a) => a.id}
+              menuPortalTarget={
+                typeof document !== "undefined"
+                  ? document.body
+                  : null
+              }
+              menuPosition="fixed"
+              styles={{
+                ...selectProps.styles,
+                menuPortal: (base) => ({
+                  ...base,
+                  zIndex: 99999,
+                }),
+              }}
+              onChange={(a) => {
+                if (a) {
+                  if (a.id === "_new") {
+                    // start connect account and then select it, etc.
+                    // TODO unset / put in loading state
+                    startConnectAccount();
+                  } else {
+                    onChange({
+                      authProvisionId: a.id,
+                    });
+                  }
                 } else {
-                  onChange({
-                    authProvisionId: a.id,
-                  });
+                  onChange(undefined);
                 }
-              } else {
-                onChange(undefined);
-              }
-            }}
-          />
-          :
-          <button type="button" {...getProps("connectButton", baseStylesConnectButton, {
-            app,
-            ...formFieldCtx,
-          })} onClick={() => startConnectAccount()}>
-            Connect {app.name}
-          </button>
+              }}
+            />
+          )
+          : (
+            <button type="button" {...getProps("connectButton", baseStylesConnectButton, {
+              app,
+              ...formFieldCtx,
+            })} onClick={() => startConnectAccount()}>
+              Connect {app.name}
+            </button>
+          )
       }
     </div>
   );

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

@@ -256,8 +256,25 @@ export function ControlSelect<T extends PropOptionValue>({
       onChange={handleChange}
       {...props}
       {...selectProps}
-      components={finalComponents}
       {...additionalProps}
+      // These must come AFTER spreads to avoid being overridden
+      classNamePrefix="react-select"
+      menuPortalTarget={
+        typeof document !== "undefined"
+          ? document.body
+          : null
+      }
+      menuPosition="fixed"
+      styles={{
+        // eslint-disable-next-line react/prop-types
+        ...props.styles,
+        ...selectProps?.styles,
+        menuPortal: (base) => ({
+          ...base,
+          zIndex: 99999,
+        }),
+      }}
+      components={finalComponents}
     />
   );
 }

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

@@ -172,6 +172,18 @@ export function SelectApp({
       }}
       onMenuScrollToBottom={handleMenuScrollToBottom}
       isLoading={isLoading}
+      menuPortalTarget={
+        typeof document !== "undefined"
+          ? document.body
+          : null
+      }
+      menuPosition="fixed"
+      styles={{
+        menuPortal: (base) => ({
+          ...base,
+          zIndex: 99999,
+        }),
+      }}
     />
   );
 }

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

@@ -98,6 +98,18 @@ export function SelectComponent({
       onMenuScrollToBottom={handleMenuScrollToBottom}
       isLoading={isLoading}
       components={customComponents}
+      menuPortalTarget={
+        typeof document !== "undefined"
+          ? document.body
+          : null
+      }
+      menuPosition="fixed"
+      styles={{
+        menuPortal: (base) => ({
+          ...base,
+          zIndex: 99999,
+        }),
+      }}
     />
   );
 }