yadunut/clan-core
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

UI: fix select render nested portal within dialog

Browse Source
This commit is contained in:
Johannes Kirschbauer
2025-01-06 10:21:51 +01:00
parent f759edd4bb
commit 9df882da24
1 changed files with 6 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
pkgs/webview-ui/app/src/Form/fields/Select.tsx
View File

@@ -18,6 +18,7 @@ import {
} from "@/src/components/inputBase"; } from "@/src/components/inputBase";
import { FieldLayout } from "./layout"; import { FieldLayout } from "./layout";
import Icon from "@/src/components/icon"; import Icon from "@/src/components/icon";
import { useContext } from "corvu/dialog";
export interface Option { export interface Option {
value: string; value: string;
@@ -45,9 +46,12 @@ interface SelectInputpProps {
placeholder?: string; placeholder?: string;
multiple?: boolean; multiple?: boolean;
loading?: boolean; loading?: boolean;
dialogContextId?: string;
} }
export function SelectInput(props: SelectInputpProps) { export function SelectInput(props: SelectInputpProps) {
const dialogContext = useContext(props.dialogContextId);
const _id = createUniqueId(); const _id = createUniqueId();
const [reference, setReference] = createSignal<HTMLElement>(); 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 <div
id={_id} id={_id}
popover popover
@@ -234,7 +238,7 @@ export function SelectInput(props: SelectInputpProps) {
top: `${position.y ?? 0}px`, top: `${position.y ?? 0}px`,
left: `${position.x ?? 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"> <ul class="menu flex max-h-96 flex-col gap-1 overflow-x-hidden overflow-y-scroll">
<Show when={!props.loading} fallback={"Loading ...."}> <Show when={!props.loading} fallback={"Loading ...."}>