From ecd046b3b22014760e4fac52cb954e7fbc5ebe09 Mon Sep 17 00:00:00 2001
From: Eric Allam <eallam@icloud.com>
Date: Fri, 1 Apr 2022 11:18:46 +0100
Subject: [PATCH] Close search when the overlay is clicked

---
 app/components/SearchBar.tsx | 1 +
 app/components/UI/Dialog.tsx | 7 ++++++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/app/components/SearchBar.tsx b/app/components/SearchBar.tsx
index 4e9a425..f45ae28 100644
--- a/app/components/SearchBar.tsx
+++ b/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",
diff --git a/app/components/UI/Dialog.tsx b/app/components/UI/Dialog.tsx
index 4f72fb0..ce8c7f8 100644
--- a/app/components/UI/Dialog.tsx
+++ b/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}