z-index fixes for dropdowns in connect-react

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"
   }
 }

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

@@ -146,44 +146,55 @@ 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"
+              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,16 @@ 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"
+      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,
+        }),
+      }}
     />
   );
 }