feat: enhance Combobox and Popover components with portalContainer support for improved rendering

Author: arjun-veer

src/components/features/memory/entry-form.tsx

@@ -1,7 +1,7 @@
 import { useForm, useStore } from "@tanstack/react-form";
 import { useMutation } from "@tanstack/react-query";
 import { Loader2Icon, SparklesIcon, TagsIcon } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 import { z } from "zod";
 import { Badge } from "@/components/ui/badge";
@@ -15,13 +15,6 @@ import {
   FieldLabel,
 } from "@/components/ui/field";
 import { InputBadge } from "@/components/ui/input-badge";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
 import { Textarea } from "@/components/ui/textarea";
 import { useMemoryMutations, useTopUsedTags } from "@/hooks/use-memories";
 import { getCategorizationService } from "@/lib/ai/categorization-service";
@@ -63,6 +56,10 @@ export function EntryForm({
   onCancel,
 }: EntryFormProps) {
   const isPreviewMode = layout === "preview";
+  const formRef = useRef<HTMLFormElement>(null);
+  const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(
+    null,
+  );
   const [selectedProvider, setSelectedProvider] = useState<
     AIProvider | undefined
   >();
@@ -254,6 +251,17 @@ export function EntryForm({
     };
   }, []);
 
+  useEffect(() => {
+    const formElement = formRef.current;
+
+    if (isPreviewMode && formElement) {
+      setPortalContainer(formElement);
+      return;
+    }
+
+    setPortalContainer(null);
+  }, [isPreviewMode]);
+
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
@@ -313,6 +321,7 @@ export function EntryForm({
 
   return (
     <form
+      ref={formRef}
       onSubmit={(e) => {
         e.preventDefault();
         form.handleSubmit();
@@ -446,43 +455,18 @@ export function EntryForm({
                     <SparklesIcon className="size-3 animate-pulse" />
                   )}
                 </FieldLabel>
-                {!isPreviewMode ? (
-                  <Combobox
-                    id={field.name}
-                    name={field.name}
-                    value={field.state.value}
-                    onValueChange={field.handleChange}
-                    options={categoryOptions}
-                    placeholder="Select a category"
-                    searchPlaceholder="Search categories..."
-                    emptyText="No category found."
-                    aria-invalid={isInvalid}
-                  />
-                ) : (
-                  <Select
-                    value={field.state.value}
-                    onValueChange={field.handleChange}
-                  >
-                    <SelectTrigger
-                      id={field.name}
-                      onBlur={field.handleBlur}
-                      aria-invalid={isInvalid}
-                      aria-describedby={
-                        isInvalid ? `${field.name}-error` : undefined
-                      }
-                      className="w-full"
-                    >
-                      <SelectValue placeholder="Select a category" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {categoryOptions.map((option) => (
-                        <SelectItem key={option.value} value={option.value}>
-                          {option.label}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                )}
+                <Combobox
+                  id={field.name}
+                  name={field.name}
+                  value={field.state.value}
+                  onValueChange={field.handleChange}
+                  options={categoryOptions}
+                  placeholder="Select a category"
+                  searchPlaceholder="Search categories..."
+                  emptyText="No category found."
+                  portalContainer={portalContainer}
+                  aria-invalid={isInvalid}
+                />
                 {isInvalid && (
                   <FieldError
                     id={`${field.name}-error`}

src/components/ui/combobox.tsx

@@ -34,6 +34,7 @@ export interface ComboboxProps {
   className?: string;
   id?: string;
   name?: string;
+  portalContainer?: React.ComponentProps<typeof PopoverContent>["portalContainer"];
   "aria-invalid"?: boolean;
 }
 
@@ -50,6 +51,7 @@ const Combobox = React.forwardRef<HTMLButtonElement, ComboboxProps>(
       className,
       id,
       name,
+      portalContainer,
       "aria-invalid": ariaInvalid,
     },
     ref,
@@ -87,6 +89,7 @@ const Combobox = React.forwardRef<HTMLButtonElement, ComboboxProps>(
         <PopoverContent
           className="w-(--radix-popover-trigger-width) p-0"
           align="start"
+          portalContainer={portalContainer}
         >
           <Command>
             <CommandInput placeholder={searchPlaceholder} />

src/components/ui/popover.tsx

@@ -19,10 +19,13 @@ function PopoverContent({
   className,
   align = "center",
   sideOffset = 4,
+  portalContainer,
   ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+}: React.ComponentProps<typeof PopoverPrimitive.Content> & {
+  portalContainer?: React.ComponentProps<typeof PopoverPrimitive.Portal>["container"];
+}) {
   return (
-    <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Portal container={portalContainer}>
       <PopoverPrimitive.Content
         data-slot="popover-content"
         align={align}