fix selectfield portal

Author: bryce-fitzsimons

src/app/SelectMenuPortal.tsx

@@ -0,0 +1,26 @@
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useState,
+} from "react";
+
+const SelectMenuPortalContext = createContext<HTMLElement | null>(null);
+
+export function SelectMenuPortalProvider({ children }: { children: React.ReactNode }) {
+  const [portalEl, setPortalEl] = useState<HTMLElement | null>(null);
+  const setRef = useCallback((el: HTMLDivElement | null) => {
+    setPortalEl(el);
+  }, []);
+
+  return (
+    <SelectMenuPortalContext.Provider value={portalEl}>
+      {children}
+      <div ref={setRef} data-select-menu-portal />
+    </SelectMenuPortalContext.Provider>
+  );
+}
+
+export function useSelectMenuPortal(): HTMLElement | null {
+  return useContext(SelectMenuPortalContext);
+}

src/app/components/Forms/MultiSelectField.tsx

@@ -4,9 +4,10 @@ import ReactSelect, {
   MenuPlacement,
 } from "react-select";
 import CreatableSelect from "react-select/creatable";
-import { customStyles, SingleValue } from "./SelectField";
 import { clone } from "lodash";
+import { useSelectMenuPortal } from "@/app/SelectMenuPortal";
 import { isDefined } from "@/app/utils";
+import { customStyles, SingleValue } from "./SelectField";
 
 export type MultiSelectFieldProps = {
   value: string[];
@@ -49,6 +50,8 @@ export default function MultiSelectField({
   formatCreateLabel,
   validOptionPattern,
 }: MultiSelectFieldProps) {
+  const menuPortalTarget = useSelectMenuPortal();
+
   const map = useMemo(() => {
     const map = new Map<string, SingleValue>();
     options.forEach((opt) => {
@@ -71,6 +74,8 @@ export default function MultiSelectField({
       isMulti
       className={className}
       menuPlacement={menuPlacement}
+      menuPortalTarget={menuPortalTarget}
+      menuPosition="fixed"
       classNamePrefix="gb-multi-select"
       formatOptionLabel={formatOptionLabel}
       isDisabled={disabled || false}

src/app/components/Forms/SelectField.tsx

@@ -5,8 +5,13 @@ import ReactSelect, {
   MenuPlacement,
 } from "react-select";
 import { clone } from "lodash";
+import { useSelectMenuPortal } from "@/app/SelectMenuPortal";
 
 export const customStyles = {
+  menuPortal: (provided: any) => ({
+    ...provided,
+    zIndex: "var(--gb-select-menu-z)",
+  }),
   control: (provided: any, state: any) => ({
     ...provided,
     borderColor: state.isFocused ? "var(--focus-8)" : "var(--gray-a7)",
@@ -114,6 +119,8 @@ export default function SelectField({
   validOptionPattern,
   menuPlacement,
 }: SelectFieldProps) {
+  const menuPortalTarget = useSelectMenuPortal();
+
   const map = useMemo(() => {
     const map = new Map<string, SingleValue>();
     options.forEach((opt) => {
@@ -136,6 +143,8 @@ export default function SelectField({
     return (
       <CreatableSelect
         menuPlacement={menuPlacement}
+        menuPortalTarget={menuPortalTarget}
+        menuPosition={menuPortalTarget ? "fixed" : undefined}
         className={className}
         isClearable={isClearable}
         isDisabled={disabled || false}
@@ -187,6 +196,8 @@ export default function SelectField({
   return (
     <ReactSelect
       menuPlacement={menuPlacement}
+      menuPortalTarget={menuPortalTarget}
+      menuPosition={menuPortalTarget ? "fixed" : undefined}
       isClearable={isClearable}
       className={className}
       isDisabled={disabled || false}

src/app/css/forms.css

@@ -1,3 +1,7 @@
+:root {
+  --gb-select-menu-z: 2147483647; /* ahead of z-front */
+}
+
 .FormRoot {
   margin: auto;
 }

src/app/index.tsx

@@ -33,6 +33,7 @@ import { Attributes } from "@growthbook/growthbook";
 import { AppMenu } from "@/app/components/AppMenu";
 import Share from "@/app/components/Share";
 import ImportExport from "@/app/components/ImportExport";
+import { SelectMenuPortalProvider } from "@/app/SelectMenuPortal";
 
 export const MW = 1200; // max-width
 export const RESPONSIVE_W = 570; // small width mode
@@ -106,7 +107,8 @@ export const App = () => {
       appearance={dark ? "dark" : "light"}
       className={dark ? "dark" : "light"}
     >
-      <div id="main" className="text-indigo-12 overflow-hidden">
+      <SelectMenuPortalProvider>
+        <div id="main" className="text-indigo-12 overflow-hidden">
         <div
           className="shadow-sm px-3 pt-1 w-full relative bg-surface z-front"
           style={{ height: NAV_H }}
@@ -343,6 +345,7 @@ export const App = () => {
           </Dialog.Content>
         </Dialog.Root>
       </div>
+      </SelectMenuPortalProvider>
     </Theme>
   );
 };