z-index fixes for dropdowns

Author: dannyroosevelt

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

@@ -154,13 +154,17 @@ 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}
             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") {

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

@@ -256,8 +256,12 @@ 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,9 @@ 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,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 }) }}
     />
   );
 }