fix: prevent Portal rendering in SelectBox to fix search input focus in dialogs

src/components/popover/popover.tsx

@@ -11,9 +11,15 @@ const PopoverAnchor = PopoverPrimitive.Anchor;
 
 const PopoverContent = React.forwardRef<
     React.ElementRef<typeof PopoverPrimitive.Content>,
-    React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
-    <PopoverPrimitive.Portal>
+    React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {
+        container?: HTMLElement | null;
+    }
+>(
+    (
+        { className, align = 'center', sideOffset = 4, container, ...props },
+        ref
+    ) => {
+        const Content = (
             <PopoverPrimitive.Content
                 ref={ref}
                 align={align}
@@ -24,8 +30,21 @@ const PopoverContent = React.forwardRef<
                 )}
                 {...props}
             />
+        );
+
+        // If container is explicitly null, don't use Portal
+        if (container === null) {
+            return Content;
+        }
+
+        // Otherwise, use Portal (default behavior)
+        return (
+            <PopoverPrimitive.Portal container={container}>
+                {Content}
             </PopoverPrimitive.Portal>
-));
+        );
+    }
+);
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
 export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

src/components/select-box/select-box.tsx

@@ -94,6 +94,10 @@ export const SelectBox = React.forwardRef<HTMLInputElement, SelectBoxProps>(
                 setOpen?.(isOpen);
                 setIsOpen(isOpen);
 
+                if (isOpen) {
+                    setSearchTerm('');
+                }
+
                 setTimeout(() => (document.body.style.pointerEvents = ''), 500);
             },
             [setOpen]
@@ -225,6 +229,7 @@ export const SelectBox = React.forwardRef<HTMLInputElement, SelectBoxProps>(
                     <CommandItem
                         className="flex items-center"
                         key={option.value}
+                        value={option.label}
                         keywords={option.regex ? [option.regex] : undefined}
                         onSelect={() =>
                             handleSelect(
@@ -276,7 +281,7 @@ export const SelectBox = React.forwardRef<HTMLInputElement, SelectBoxProps>(
         );
 
         return (
-            <Popover open={isOpen} onOpenChange={onOpenChange} modal={true}>
+            <Popover open={isOpen} onOpenChange={onOpenChange}>
                 <PopoverTrigger asChild tabIndex={0} onKeyDown={handleKeyDown}>
                     <div
                         className={cn(
@@ -350,6 +355,7 @@ export const SelectBox = React.forwardRef<HTMLInputElement, SelectBoxProps>(
                         popoverClassName
                     )}
                     align="center"
+                    container={null}
                 >
                     <Command
                         filter={(value, search, keywords) => {
@@ -417,25 +423,30 @@ export const SelectBox = React.forwardRef<HTMLInputElement, SelectBoxProps>(
                         <CommandEmpty>
                             {emptyPlaceholder ?? 'No results found.'}
                         </CommandEmpty>
-
                         <ScrollArea>
-                            <div className="max-h-64 w-full">
-                                <CommandList className="max-h-fit w-full">
-                                    {hasGroups
-                                        ? Object.entries(groups).map(
+                            <div className="max-h-64">
+                                {hasGroups ? (
+                                    Object.entries(groups).map(
                                         ([groupName, groupOptions]) => (
                                             <CommandGroup
                                                 key={groupName}
                                                 heading={groupName}
                                             >
+                                                <CommandList>
                                                     {groupOptions.map(
                                                         renderOption
                                                     )}
+                                                </CommandList>
                                             </CommandGroup>
                                         )
                                     )
-                                        : options.map(renderOption)}
+                                ) : (
+                                    <CommandGroup>
+                                        <CommandList>
+                                            {options.map(renderOption)}
                                         </CommandList>
+                                    </CommandGroup>
+                                )}
                             </div>
                         </ScrollArea>
                     </Command>