fix(select-box): fix select box issue in dialog (#840)

src/components/dialog/dialog.tsx

@@ -4,6 +4,7 @@ import { Cross2Icon } from '@radix-ui/react-icons';
 
 import { cn } from '@/lib/utils';
 import { ScrollArea } from '../scroll-area/scroll-area';
+import { ChevronLeft } from 'lucide-react';
 
 const Dialog = DialogPrimitive.Root;
 
@@ -32,10 +33,45 @@ const DialogContent = React.forwardRef<
     React.ElementRef<typeof DialogPrimitive.Content>,
     React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
         showClose?: boolean;
+        showBack?: boolean;
+        backButtonClassName?: string;
+        blurBackground?: boolean;
+        forceOverlay?: boolean;
+        onBackClick?: () => void;
     }
->(({ className, children, showClose, ...props }, ref) => (
+>(
+    (
+        {
+            className,
+            children,
+            showClose,
+            showBack,
+            onBackClick,
+            backButtonClassName,
+            blurBackground,
+            forceOverlay,
+            ...props
+        },
+        ref
+    ) => (
         <DialogPortal>
-        <DialogOverlay />
+            {forceOverlay ? (
+                <div
+                    className={cn(
+                        'fixed inset-0 z-50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+                        {
+                            'bg-black/80': !blurBackground,
+                            'bg-black/30 backdrop-blur-sm': blurBackground,
+                        }
+                    )}
+                    data-state="open"
+                />
+            ) : null}
+            <DialogOverlay
+                className={cn({
+                    'bg-black/30 backdrop-blur-sm': blurBackground,
+                })}
+            />
             <DialogPrimitive.Content
                 ref={ref}
                 className={cn(
@@ -45,6 +81,17 @@ const DialogContent = React.forwardRef<
                 {...props}
             >
                 {children}
+                {showBack && (
+                    <button
+                        onClick={() => onBackClick?.()}
+                        className={cn(
+                            'absolute left-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground',
+                            backButtonClassName
+                        )}
+                    >
+                        <ChevronLeft className="size-4" />
+                    </button>
+                )}
                 {showClose && (
                     <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
                         <Cross2Icon className="size-4" />
@@ -53,7 +100,8 @@ const DialogContent = React.forwardRef<
                 )}
             </DialogPrimitive.Content>
         </DialogPortal>
-));
+    )
+);
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({

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]

src/dialogs/create-relationship-dialog/create-relationship-dialog.tsx

@@ -218,8 +218,14 @@ export const CreateRelationshipDialog: React.FC<
                     closeCreateRelationshipDialog();
                 }
             }}
+            modal={false}
+        >
+            <DialogContent
+                className="flex flex-col overflow-y-auto"
+                showClose
+                forceOverlay
+                onInteractOutside={(e) => e.preventDefault()}
             >
-            <DialogContent className="flex flex-col overflow-y-auto" showClose>
                 <DialogHeader>
                     <DialogTitle>
                         {t('create_relationship_dialog.title')}