From e16e26977570e61efa6f3340ad040c143e8e1cea Mon Sep 17 00:00:00 2001
From: Siddhant Rai <siddhant.rai.5686@gmail.com>
Date: Fri, 21 Jun 2024 23:35:03 +0530
Subject: [PATCH] fix: dropdown closes on clicking outside

---
 frontend/src/components/Dropdown.tsx       | 18 ++++++++++++++++++
 frontend/src/components/SourceDropdown.tsx | 20 ++++++++++++++++++--
 frontend/src/conversation/Conversation.tsx |  2 +-
 3 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Dropdown.tsx b/frontend/src/components/Dropdown.tsx
index 89fe3df..17516aa 100644
--- a/frontend/src/components/Dropdown.tsx
+++ b/frontend/src/components/Dropdown.tsx
@@ -42,9 +42,26 @@ function Dropdown({
   onDelete?: (value: string) => void;
   placeholder?: string;
 }) {
+  const dropdownRef = React.useRef<HTMLDivElement>(null);
   const [isOpen, setIsOpen] = React.useState(false);
   const borderRadius = rounded === 'xl' ? 'rounded-xl' : 'rounded-3xl';
   const borderTopRadius = rounded === 'xl' ? 'rounded-t-xl' : 'rounded-t-3xl';
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (
+      dropdownRef.current &&
+      !dropdownRef.current.contains(event.target as Node)
+    ) {
+      setIsOpen(false);
+    }
+  };
+
+  React.useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
   return (
     <div
       className={[
@@ -53,6 +70,7 @@ function Dropdown({
           : 'relative align-middle',
         size,
       ].join(' ')}
+      ref={dropdownRef}
     >
       <button
         onClick={() => setIsOpen(!isOpen)}
diff --git a/frontend/src/components/SourceDropdown.tsx b/frontend/src/components/SourceDropdown.tsx
index af85026..6983fe7 100644
--- a/frontend/src/components/SourceDropdown.tsx
+++ b/frontend/src/components/SourceDropdown.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import Trash from '../assets/trash.svg';
 import Arrow2 from '../assets/dropdown-arrow.svg';
 import { Doc } from '../preferences/preferenceApi';
@@ -21,6 +22,8 @@ function SourceDropdown({
   handleDeleteClick,
 }: Props) {
   const dispatch = useDispatch();
+  const { t } = useTranslation();
+  const dropdownRef = React.useRef<HTMLDivElement>(null);
   const embeddingsName =
     import.meta.env.VITE_EMBEDDINGS_NAME ||
     'huggingface_sentence-transformers/all-mpnet-base-v2';
@@ -30,10 +33,23 @@ function SourceDropdown({
     setIsDocsListOpen(false);
   };
 
-  const { t } = useTranslation();
+  const handleClickOutside = (event: MouseEvent) => {
+    if (
+      dropdownRef.current &&
+      !dropdownRef.current.contains(event.target as Node)
+    ) {
+      setIsDocsListOpen(false);
+    }
+  };
 
+  React.useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
   return (
-    <div className="relative w-5/6 rounded-3xl">
+    <div className="relative w-5/6 rounded-3xl" ref={dropdownRef}>
       <button
         onClick={() => setIsDocsListOpen(!isDocsListOpen)}
         className={`flex w-full cursor-pointer items-center border border-silver bg-white p-[14px] dark:bg-transparent ${
diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index 34b28c2..3d23f8b 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -195,7 +195,7 @@ export default function Conversation() {
       <div
         onWheel={handleUserInterruption}
         onTouchMove={handleUserInterruption}
-        className="flex h-[90%] w-full justify-center overflow-y-auto p-4 md:h-[84vh]"
+        className="flex h-[90%] w-full justify-center overflow-y-auto p-4 md:h-[83vh]"
       >
         {queries.length > 0 && !hasScrolledToLast && (
           <button