From 4baf25e5df16eb6d2d24cc51d9341f29126e9ba9 Mon Sep 17 00:00:00 2001 From: Danny Roosevelt Date: Sat, 29 Nov 2025 17:42:17 +1100 Subject: [PATCH 1/6] z-index fixes for dropdowns --- packages/connect-react/package.json | 4 +- .../src/components/ControlApp.tsx | 4 ++ .../src/components/ControlSelect.tsx | 6 ++- .../src/components/SelectApp.tsx | 3 ++ .../src/components/SelectComponent.tsx | 3 ++ pnpm-lock.yaml | 37 +++++++------------ 6 files changed, 30 insertions(+), 27 deletions(-) diff --git a/packages/connect-react/package.json b/packages/connect-react/package.json index 193a2fb576a59..d501ab5931503 100644 --- a/packages/connect-react/package.json +++ b/packages/connect-react/package.json @@ -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" } } diff --git a/packages/connect-react/src/components/ControlApp.tsx b/packages/connect-react/src/components/ControlApp.tsx index 7f91b4e25e2e6..258a4904d4d1b 100644 --- a/packages/connect-react/src/components/ControlApp.tsx +++ b/packages/connect-react/src/components/ControlApp.tsx @@ -154,6 +154,8 @@ export function ControlApp({ app }: ControlAppProps) { 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} @@ -161,6 +163,8 @@ export function ControlApp({ app }: ControlAppProps) { isSearchable={true} getOptionLabel={(a) => a.name ?? ""} getOptionValue={(a) => a.id} + menuPortalTarget={typeof document !== "undefined" ? document.body : null} + menuPosition="fixed" onChange={(a) => { if (a) { if (a.id === "_new") { diff --git a/packages/connect-react/src/components/ControlSelect.tsx b/packages/connect-react/src/components/ControlSelect.tsx index 03221d11f9b0d..ac1563855efe3 100644 --- a/packages/connect-react/src/components/ControlSelect.tsx +++ b/packages/connect-react/src/components/ControlSelect.tsx @@ -256,8 +256,12 @@ export function ControlSelect({ 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" + components={finalComponents} /> ); } diff --git a/packages/connect-react/src/components/SelectApp.tsx b/packages/connect-react/src/components/SelectApp.tsx index 1ed1c56156800..cb22f8933edd1 100644 --- a/packages/connect-react/src/components/SelectApp.tsx +++ b/packages/connect-react/src/components/SelectApp.tsx @@ -172,6 +172,9 @@ export function SelectApp({ }} onMenuScrollToBottom={handleMenuScrollToBottom} isLoading={isLoading} + menuPortalTarget={typeof document !== "undefined" ? document.body : null} + menuPosition="fixed" + styles={{ menuPortal: (base) => ({ ...base, zIndex: 99999 }) }} /> ); } diff --git a/packages/connect-react/src/components/SelectComponent.tsx b/packages/connect-react/src/components/SelectComponent.tsx index 5ec772566862e..927244f0eb1b9 100644 --- a/packages/connect-react/src/components/SelectComponent.tsx +++ b/packages/connect-react/src/components/SelectComponent.tsx @@ -98,6 +98,9 @@ export function SelectComponent({ onMenuScrollToBottom={handleMenuScrollToBottom} isLoading={isLoading} components={customComponents} + menuPortalTarget={typeof document !== "undefined" ? document.body : null} + menuPosition="fixed" + styles={{ menuPortal: (base) => ({ ...base, zIndex: 99999 }) }} /> ); } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9ec063664a96f..80b788e612436 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2589,8 +2589,7 @@ importers: specifier: ^3.1.1 version: 3.1.1 - components/chartly: - specifiers: {} + components/chartly: {} components/chartmogul: dependencies: @@ -3541,8 +3540,7 @@ importers: specifier: ^3.1.1 version: 3.1.1 - components/cryptlex: - specifiers: {} + components/cryptlex: {} components/crypto_apis_by_alternative: {} @@ -4289,8 +4287,7 @@ importers: specifier: ^3.1.1 version: 3.1.1 - components/docuwriter_ai: - specifiers: {} + components/docuwriter_ai: {} components/dokan: {} @@ -5776,8 +5773,7 @@ importers: specifier: 4.0.4 version: 4.0.4 - components/genpage: - specifiers: {} + components/genpage: {} components/geoapify: dependencies: @@ -7118,8 +7114,7 @@ importers: specifier: ^3.1.1 version: 3.1.1 - components/hybrid_analysis: - specifiers: {} + components/hybrid_analysis: {} components/hygraph: {} @@ -7732,8 +7727,7 @@ importers: components/junip: {} - components/just_invoice: - specifiers: {} + components/just_invoice: {} components/justcall: dependencies: @@ -11434,8 +11428,7 @@ importers: specifier: ^1.6.8 version: 1.6.8 - components/pod_ai: - specifiers: {} + components/pod_ai: {} components/podio: dependencies: @@ -11735,8 +11728,7 @@ importers: specifier: ^1.6.8 version: 1.6.8 - components/productify_ai: - specifiers: {} + components/productify_ai: {} components/productive_io: dependencies: @@ -11788,8 +11780,7 @@ importers: specifier: ^1.6.8 version: 1.6.8 - components/proovl: - specifiers: {} + components/proovl: {} components/propelauth: {} @@ -13831,8 +13822,7 @@ importers: specifier: ^3.1.1 version: 3.1.1 - components/slab: - specifiers: {} + components/slab: {} components/slack: dependencies: @@ -15934,8 +15924,7 @@ importers: specifier: 4.0.4 version: 4.0.4 - components/vatfix_plus: - specifiers: {} + components/vatfix_plus: {} components/vbout: dependencies: @@ -17461,10 +17450,10 @@ importers: specifier: ^4.5.0 version: 4.5.0 react: - specifier: ^16.8.0 || ^17.0.0 || ^18.0.0 + specifier: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 version: 18.3.1 react-dom: - specifier: ^16.8.0 || ^17.0.0 || ^18.0.0 + specifier: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 version: 18.3.1(react@18.3.1) react-markdown: specifier: ^9.0.1 From 3e639fa721eb987fde764f23da28df3728a92d4d Mon Sep 17 00:00:00 2001 From: Danny Roosevelt Date: Sat, 29 Nov 2025 17:50:32 +1100 Subject: [PATCH 2/6] linting fixes --- .../src/components/ControlApp.tsx | 87 ++++++++++--------- .../src/components/ControlSelect.tsx | 6 +- .../src/components/SelectApp.tsx | 13 ++- .../src/components/SelectComponent.tsx | 13 ++- 4 files changed, 74 insertions(+), 45 deletions(-) diff --git a/packages/connect-react/src/components/ControlApp.tsx b/packages/connect-react/src/components/ControlApp.tsx index 258a4904d4d1b..c185ebc6b7ef4 100644 --- a/packages/connect-react/src/components/ControlApp.tsx +++ b/packages/connect-react/src/components/ControlApp.tsx @@ -146,48 +146,55 @@ export function ControlApp({ app }: ControlAppProps) { app, ...formFieldCtx, })}> - {isLoadingAccounts ? - `Loading ${app.name} accounts...` - : accounts.length ? - a.name ?? ""} + getOptionValue={(a) => a.id} + menuPortalTarget={ + typeof document !== "undefined" + ? document.body + : null + } + menuPosition="fixed" + 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); - } - }} - /> - : - + }} + /> + ) + : ( + + ) } ); diff --git a/packages/connect-react/src/components/ControlSelect.tsx b/packages/connect-react/src/components/ControlSelect.tsx index ac1563855efe3..46957b867d7f9 100644 --- a/packages/connect-react/src/components/ControlSelect.tsx +++ b/packages/connect-react/src/components/ControlSelect.tsx @@ -259,7 +259,11 @@ export function ControlSelect({ {...additionalProps} // These must come AFTER spreads to avoid being overridden classNamePrefix="react-select" - menuPortalTarget={typeof document !== "undefined" ? document.body : null} + menuPortalTarget={ + typeof document !== "undefined" + ? document.body + : null + } menuPosition="fixed" components={finalComponents} /> diff --git a/packages/connect-react/src/components/SelectApp.tsx b/packages/connect-react/src/components/SelectApp.tsx index cb22f8933edd1..d44989e8d2852 100644 --- a/packages/connect-react/src/components/SelectApp.tsx +++ b/packages/connect-react/src/components/SelectApp.tsx @@ -172,9 +172,18 @@ export function SelectApp({ }} onMenuScrollToBottom={handleMenuScrollToBottom} isLoading={isLoading} - menuPortalTarget={typeof document !== "undefined" ? document.body : null} + menuPortalTarget={ + typeof document !== "undefined" + ? document.body + : null + } menuPosition="fixed" - styles={{ menuPortal: (base) => ({ ...base, zIndex: 99999 }) }} + styles={{ + menuPortal: (base) => ({ + ...base, + zIndex: 99999, + }), + }} /> ); } diff --git a/packages/connect-react/src/components/SelectComponent.tsx b/packages/connect-react/src/components/SelectComponent.tsx index 927244f0eb1b9..5763d544024b7 100644 --- a/packages/connect-react/src/components/SelectComponent.tsx +++ b/packages/connect-react/src/components/SelectComponent.tsx @@ -98,9 +98,18 @@ export function SelectComponent({ onMenuScrollToBottom={handleMenuScrollToBottom} isLoading={isLoading} components={customComponents} - menuPortalTarget={typeof document !== "undefined" ? document.body : null} + menuPortalTarget={ + typeof document !== "undefined" + ? document.body + : null + } menuPosition="fixed" - styles={{ menuPortal: (base) => ({ ...base, zIndex: 99999 }) }} + styles={{ + menuPortal: (base) => ({ + ...base, + zIndex: 99999, + }), + }} /> ); } From 946f0f781324648878639d67c3bf2000d64d8a0d Mon Sep 17 00:00:00 2001 From: Danny Roosevelt Date: Sat, 29 Nov 2025 17:58:09 +1100 Subject: [PATCH 3/6] PR feedback --- packages/connect-react/package.json | 2 +- packages/connect-react/src/components/ControlApp.tsx | 7 +++++++ packages/connect-react/src/components/ControlSelect.tsx | 7 +++++++ pnpm-lock.yaml | 2 +- 4 files changed, 16 insertions(+), 2 deletions(-) diff --git a/packages/connect-react/package.json b/packages/connect-react/package.json index d501ab5931503..c6fe67aae3995 100644 --- a/packages/connect-react/package.json +++ b/packages/connect-react/package.json @@ -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", diff --git a/packages/connect-react/src/components/ControlApp.tsx b/packages/connect-react/src/components/ControlApp.tsx index c185ebc6b7ef4..2c97211dfd320 100644 --- a/packages/connect-react/src/components/ControlApp.tsx +++ b/packages/connect-react/src/components/ControlApp.tsx @@ -170,6 +170,13 @@ export function ControlApp({ app }: ControlAppProps) { : null } menuPosition="fixed" + styles={{ + ...selectProps.styles, + menuPortal: (base) => ({ + ...base, + zIndex: 99999, + }), + }} onChange={(a) => { if (a) { if (a.id === "_new") { diff --git a/packages/connect-react/src/components/ControlSelect.tsx b/packages/connect-react/src/components/ControlSelect.tsx index 46957b867d7f9..7e2aa916d6d7d 100644 --- a/packages/connect-react/src/components/ControlSelect.tsx +++ b/packages/connect-react/src/components/ControlSelect.tsx @@ -265,6 +265,13 @@ export function ControlSelect({ : null } menuPosition="fixed" + styles={{ + ...props.styles, + menuPortal: (base) => ({ + ...base, + zIndex: 99999, + }), + }} components={finalComponents} /> ); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 80b788e612436..f7c76aa622871 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -17459,7 +17459,7 @@ importers: specifier: ^9.0.1 version: 9.1.0(@types/react@18.3.26)(react@18.3.1) react-select: - specifier: ^5.8.2 + specifier: ^5.9.0 version: 5.10.2(@types/react@18.3.26)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) devDependencies: '@emotion/react': From 624684bab6b66739d942008600ed46c2e7d4f15a Mon Sep 17 00:00:00 2001 From: Danny Roosevelt Date: Sat, 29 Nov 2025 17:59:13 +1100 Subject: [PATCH 4/6] version and changelog --- packages/connect-react/CHANGELOG.md | 15 +++++++++++++++ packages/connect-react/package.json | 2 +- 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/packages/connect-react/CHANGELOG.md b/packages/connect-react/CHANGELOG.md index 570e94eacd02c..375c746079490 100644 --- a/packages/connect-react/CHANGELOG.md +++ b/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 diff --git a/packages/connect-react/package.json b/packages/connect-react/package.json index c6fe67aae3995..bcd1a8a0d89f4 100644 --- a/packages/connect-react/package.json +++ b/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" From 1484198ec7c8c5ef08c8bad2cc7101680a771e40 Mon Sep 17 00:00:00 2001 From: Danny Roosevelt Date: Sat, 29 Nov 2025 18:55:48 +1100 Subject: [PATCH 5/6] Update ControlSelect.tsx --- packages/connect-react/src/components/ControlSelect.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/connect-react/src/components/ControlSelect.tsx b/packages/connect-react/src/components/ControlSelect.tsx index 7e2aa916d6d7d..88f86f7af904a 100644 --- a/packages/connect-react/src/components/ControlSelect.tsx +++ b/packages/connect-react/src/components/ControlSelect.tsx @@ -266,6 +266,7 @@ export function ControlSelect({ } menuPosition="fixed" styles={{ + // eslint-disable-next-line react/prop-types ...props.styles, menuPortal: (base) => ({ ...base, From de6eed5b258641f21241251d41a75183e6fbcde6 Mon Sep 17 00:00:00 2001 From: Danny Roosevelt Date: Sat, 29 Nov 2025 19:03:24 +1100 Subject: [PATCH 6/6] Update ControlSelect.tsx --- packages/connect-react/src/components/ControlSelect.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/connect-react/src/components/ControlSelect.tsx b/packages/connect-react/src/components/ControlSelect.tsx index 88f86f7af904a..9c037aca2a33d 100644 --- a/packages/connect-react/src/components/ControlSelect.tsx +++ b/packages/connect-react/src/components/ControlSelect.tsx @@ -268,6 +268,7 @@ export function ControlSelect({ styles={{ // eslint-disable-next-line react/prop-types ...props.styles, + ...selectProps?.styles, menuPortal: (base) => ({ ...base, zIndex: 99999,