From 9df882da245ebdb38eb7999501ed6e33b5ec8bf7 Mon Sep 17 00:00:00 2001
From: Johannes Kirschbauer <hsjobeki@gmail.com>
Date: Mon, 6 Jan 2025 10:21:51 +0100
Subject: [PATCH] UI: fix select render nested portal within dialog

---
 pkgs/webview-ui/app/src/Form/fields/Select.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/pkgs/webview-ui/app/src/Form/fields/Select.tsx b/pkgs/webview-ui/app/src/Form/fields/Select.tsx
index 26990bbcf..5b92cf391 100644
--- a/pkgs/webview-ui/app/src/Form/fields/Select.tsx
+++ b/pkgs/webview-ui/app/src/Form/fields/Select.tsx
@@ -18,6 +18,7 @@ import {
 } from "@/src/components/inputBase";
 import { FieldLayout } from "./layout";
 import Icon from "@/src/components/icon";
+import { useContext } from "corvu/dialog";
 
 export interface Option {
   value: string;
@@ -45,9 +46,12 @@ interface SelectInputpProps {
   placeholder?: string;
   multiple?: boolean;
   loading?: boolean;
+  dialogContextId?: string;
 }
 
 export function SelectInput(props: SelectInputpProps) {
+  const dialogContext = useContext(props.dialogContextId);
+
   const _id = createUniqueId();
 
   const [reference, setReference] = createSignal<HTMLElement>();
@@ -223,7 +227,7 @@ export function SelectInput(props: SelectInputpProps) {
         }
       />
 
-      <Portal mount={document.body}>
+      <Portal mount={dialogContext.contentRef?.() || document.body}>
         <div
           id={_id}
           popover
@@ -234,7 +238,7 @@ export function SelectInput(props: SelectInputpProps) {
             top: `${position.y ?? 0}px`,
             left: `${position.x ?? 0}px`,
           }}
-          class="z-[1] shadow"
+          class="z-[1000] shadow"
         >
           <ul class="menu flex max-h-96 flex-col gap-1 overflow-x-hidden overflow-y-scroll">
             <Show when={!props.loading} fallback={"Loading ...."}>