From feaa85f76466cf9a8402ba4c5350f440213aa9a0 Mon Sep 17 00:00:00 2001
From: pablodanswer <pablo@danswer.ai>
Date: Tue, 27 Aug 2024 09:31:25 -0700
Subject: [PATCH] new util for modal edge cases

---
 web/src/components/Modal.tsx                  |  4 +++-
 web/src/components/admin/connectors/Field.tsx |  1 -
 web/src/components/modals/ModalWrapper.tsx    |  4 +++-
 web/src/lib/contains.ts                       | 20 +++++++++++++++++++
 4 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/web/src/components/Modal.tsx b/web/src/components/Modal.tsx
index 782bd29c7cc3..f3985276520c 100644
--- a/web/src/components/Modal.tsx
+++ b/web/src/components/Modal.tsx
@@ -3,6 +3,7 @@ import { Divider } from "@tremor/react";
 import { FiX } from "react-icons/fi";
 import { IconProps } from "./icons/icons";
 import { useRef } from "react";
+import { isEventWithinRef } from "@/lib/contains";
 
 interface ModalProps {
   icon?: ({ size, className }: IconProps) => JSX.Element;
@@ -33,7 +34,8 @@ export function Modal({
     if (
       onOutsideClick &&
       modalRef.current &&
-      !modalRef.current.contains(e.target as Node)
+      !modalRef.current.contains(e.target as Node) &&
+      !isEventWithinRef(e.nativeEvent, modalRef)
     ) {
       onOutsideClick();
     }
diff --git a/web/src/components/admin/connectors/Field.tsx b/web/src/components/admin/connectors/Field.tsx
index a414101ef7ab..2dfcda222c1b 100644
--- a/web/src/components/admin/connectors/Field.tsx
+++ b/web/src/components/admin/connectors/Field.tsx
@@ -552,7 +552,6 @@ export function SelectorFormField({
     <div className="mb-4">
       {label && <Label>{label}</Label>}
       {subtext && <SubLabel>{subtext}</SubLabel>}
-
       <div className="mt-2">
         <DefaultDropdown
           options={options}
diff --git a/web/src/components/modals/ModalWrapper.tsx b/web/src/components/modals/ModalWrapper.tsx
index 8d2bc1f807d7..e264410863d1 100644
--- a/web/src/components/modals/ModalWrapper.tsx
+++ b/web/src/components/modals/ModalWrapper.tsx
@@ -1,5 +1,6 @@
 "use client";
 import { XIcon } from "@/components/icons/icons";
+import { isEventWithinRef } from "@/lib/contains";
 import { useRef } from "react";
 
 export const ModalWrapper = ({
@@ -19,7 +20,8 @@ export const ModalWrapper = ({
     if (
       onClose &&
       modalRef.current &&
-      !modalRef.current.contains(e.target as Node)
+      !modalRef.current.contains(e.target as Node) &&
+      !isEventWithinRef(e.nativeEvent, modalRef)
     ) {
       onClose();
     }
diff --git a/web/src/lib/contains.ts b/web/src/lib/contains.ts
index 654f6bd2c868..ede3675ceb0a 100644
--- a/web/src/lib/contains.ts
+++ b/web/src/lib/contains.ts
@@ -1,3 +1,5 @@
+import { RefObject } from "react";
+
 interface SomeNonNestedObject {
   [key: string]: any;
 }
@@ -31,3 +33,21 @@ export function containsObject(
   // NOTE: only works for non-nested objects
   return list.some((item) => objectsAreEquivalent(item, obj));
 }
+
+export function isEventWithinRef(
+  event: MouseEvent | TouchEvent,
+  ref: RefObject<HTMLElement>
+): boolean {
+  if (!ref.current) return false;
+
+  const rect = ref.current.getBoundingClientRect();
+  const clientX = "touches" in event ? event.touches[0].clientX : event.clientX;
+  const clientY = "touches" in event ? event.touches[0].clientY : event.clientY;
+
+  return (
+    clientX >= rect.left &&
+    clientX <= rect.right &&
+    clientY >= rect.top &&
+    clientY <= rect.bottom
+  );
+}