Close search when the overlay is clicked

Author: ericallam

app/components/SearchBar.tsx

@@ -41,6 +41,7 @@ export function SearchBar() {
         </div>
       </DialogTrigger>
       <DialogContent
+        onOverlayClick={() => setIsOpen(false)}
         className={classnames(
           "fixed z-50",
           "w-[95vw] max-w-xl rounded-lg",

app/components/UI/Dialog.tsx

@@ -3,12 +3,17 @@ import React, { ComponentPropsWithoutRef } from "react";
 
 export const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
-  ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+  ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+    onOverlayClick?: () => void;
+  }
 >(({ children, ...props }, forwardedRef) => (
   <DialogPrimitive.Portal>
     <DialogPrimitive.Overlay
       forceMount
       className="fixed inset-0 z-20 bg-black/60"
+      onClick={() => {
+        props.onOverlayClick && props.onOverlayClick();
+      }}
     />
     <DialogPrimitive.Content forceMount {...props} ref={forwardedRef}>
       {children}