From b73de90487ba2d89346877e919d7335806c98027 Mon Sep 17 00:00:00 2001
From: Johannes Kirschbauer <hsjobeki@gmail.com>
Date: Thu, 9 Jan 2025 10:15:29 +0100
Subject: [PATCH] Fix: select add portalRef instead of modalContextId

---
 .../webview-ui/app/src/Form/fields/Select.tsx |  12 +-
 .../src/routes/machines/install/disk-step.tsx | 134 ++++++++++--------
 2 files changed, 84 insertions(+), 62 deletions(-)

diff --git a/pkgs/webview-ui/app/src/Form/fields/Select.tsx b/pkgs/webview-ui/app/src/Form/fields/Select.tsx
index 18a98534b..8a149e9b3 100644
--- a/pkgs/webview-ui/app/src/Form/fields/Select.tsx
+++ b/pkgs/webview-ui/app/src/Form/fields/Select.tsx
@@ -5,6 +5,7 @@ import {
   type JSX,
   For,
   createMemo,
+  Accessor,
 } from "solid-js";
 import { Portal } from "solid-js/web";
 import { useFloating } from "../base";
@@ -46,11 +47,12 @@ interface SelectInputpProps {
   placeholder?: string;
   multiple?: boolean;
   loading?: boolean;
-  dialogContextId?: string;
+  portalRef?: Accessor<HTMLElement | null>;
 }
 
 export function SelectInput(props: SelectInputpProps) {
-  const dialogContext = useContext(props.dialogContextId);
+  const dialogContext = (dialogContextId?: string) =>
+    useContext(dialogContextId);
 
   const _id = createUniqueId();
 
@@ -228,7 +230,11 @@ export function SelectInput(props: SelectInputpProps) {
         }
       />
 
-      <Portal mount={dialogContext.contentRef?.() || document.body}>
+      <Portal
+        mount={
+          props.portalRef ? props.portalRef() || document.body : document.body
+        }
+      >
         <div
           id={_id}
           popover
diff --git a/pkgs/webview-ui/app/src/routes/machines/install/disk-step.tsx b/pkgs/webview-ui/app/src/routes/machines/install/disk-step.tsx
index 78b1bf3b3..29b07c959 100644
--- a/pkgs/webview-ui/app/src/routes/machines/install/disk-step.tsx
+++ b/pkgs/webview-ui/app/src/routes/machines/install/disk-step.tsx
@@ -11,6 +11,7 @@ import { StepProps } from "./hardware-step";
 import { SelectInput } from "@/src/Form/fields/Select";
 import { Typography } from "@/src/components/Typography";
 import { Group } from "@/src/components/group";
+import { useContext } from "corvu/dialog";
 
 export interface DiskValues extends FieldValues {
   placeholders: {
@@ -44,67 +45,82 @@ export const DiskStep = (props: StepProps<DiskValues>) => {
     },
   }));
 
+  const modalContext = useContext();
+
   return (
-    <Form
-      onSubmit={handleSubmit}
-      class="flex flex-col gap-6"
-      noValidate={false}
-    >
-      <span class="flex flex-col gap-4">
-        <Field name="schema" validate={required("Schema must be provided")}>
-          {(field, fieldProps) => (
-            <>
-              <Typography
-                hierarchy="body"
-                size="default"
-                weight="bold"
-                class="capitalize"
+    <>
+      <Form
+        onSubmit={handleSubmit}
+        class="flex flex-col gap-6"
+        noValidate={false}
+      >
+        <div class="max-h-[calc(100vh-20rem)] overflow-y-scroll">
+          <div class="flex h-full flex-col gap-6 p-4">
+            <span class="flex flex-col gap-4">
+              <Field
+                name="schema"
+                validate={required("Schema must be provided")}
               >
-                {(field.value || "No schema selected").split("-").join(" ")}
-              </Typography>
-              <Typography
-                hierarchy="body"
-                size="xs"
-                weight="medium"
-                class="underline"
+                {(field, fieldProps) => (
+                  <>
+                    <Typography
+                      hierarchy="body"
+                      size="default"
+                      weight="bold"
+                      class="capitalize"
+                    >
+                      {(field.value || "No schema selected")
+                        .split("-")
+                        .join(" ")}
+                    </Typography>
+                    <Typography
+                      hierarchy="body"
+                      size="xs"
+                      weight="medium"
+                      class="underline"
+                    >
+                      Change schema
+                    </Typography>
+                  </>
+                )}
+              </Field>
+            </span>
+            <Group>
+              {props.initial?.initialized &&
+                "Disk has been initialized already"}
+              <Field
+                name="placeholders.mainDisk"
+                validate={
+                  !props.initial?.initialized
+                    ? required("Disk must be provided")
+                    : undefined
+                }
               >
-                Change schema
-              </Typography>
-            </>
-          )}
-        </Field>
-      </span>
-      <Group>
-        {props.initial?.initialized && "Disk has been initialized already"}
-        <Field
-          name="placeholders.mainDisk"
-          validate={
-            !props.initial?.initialized
-              ? required("Disk must be provided")
-              : undefined
-          }
-        >
-          {(field, fieldProps) => (
-            <SelectInput
-              loading={diskSchemaQuery.isFetching}
-              options={
-                diskSchemaQuery.data?.["single-disk"].placeholders[
-                  "mainDisk"
-                ].options?.map((o) => ({ label: o, value: o })) || [
-                  { label: "No options", value: "" },
-                ]
-              }
-              error={field.error}
-              label="Main Disk"
-              value={field.value || ""}
-              placeholder="Select a disk"
-              selectProps={fieldProps}
-              required={!props.initial?.initialized}
-            />
-          )}
-        </Field>
-      </Group>
-      {props.footer}
-    </Form>
+                {(field, fieldProps) => (
+                  <SelectInput
+                    loading={diskSchemaQuery.isFetching}
+                    options={
+                      diskSchemaQuery.data?.["single-disk"].placeholders[
+                        "mainDisk"
+                      ].options?.map((o) => ({ label: o, value: o })) || [
+                        { label: "No options", value: "" },
+                      ]
+                    }
+                    error={field.error}
+                    label="Main Disk"
+                    value={field.value || ""}
+                    placeholder="Select a disk"
+                    selectProps={fieldProps}
+                    required={!props.initial?.initialized}
+                    portalRef={modalContext.contentRef}
+                  />
+                )}
+              </Field>
+            </Group>
+          </div>
+        </div>
+        {props.footer}
+      </Form>
+    </>
   );
 };