From 6cdb803f5103fc6290bca382b800e1eb4ef5cbee Mon Sep 17 00:00:00 2001
From: Samarpita Bhaumik <samarpitabhaumik2017@gmail.com>
Date: Thu, 17 Oct 2024 10:41:13 +0530
Subject: [PATCH 1/2] Update PathService.tsx

Signed-off-by: Samarpita Bhaumik <samarpitabhaumik2017@gmail.com>
---
 src/components/PathService/PathService.tsx | 23 +++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/components/PathService/PathService.tsx b/src/components/PathService/PathService.tsx
index 6c80b9f7..577bd50c 100644
--- a/src/components/PathService/PathService.tsx
+++ b/src/components/PathService/PathService.tsx
@@ -21,6 +21,7 @@ const PathService: React.FC<PathServiceProps> = ({ reset, rootPath, path, handle
   const [items, setItems] = useState<string[]>([]);
   const [showDropdown, setShowDropdown] = useState<boolean>(false);
   const inputRef = useRef<HTMLInputElement>(null);
+  const componentRef = useRef<HTMLDivElement>(null); // Add a ref to the entire component
   const [validPath, setValidPath] = React.useState<ValidatedOptions>();
 
   const validatePath = () => {
@@ -30,7 +31,6 @@ const PathService: React.FC<PathServiceProps> = ({ reset, rootPath, path, handle
       return;
     }
     setValidPath(ValidatedOptions.error);
-    return;
   };
 
   const fetchData = async (subpath: string) => {
@@ -93,6 +93,23 @@ const PathService: React.FC<PathServiceProps> = ({ reset, rootPath, path, handle
     validatePath();
   }, [inputValue]);
 
+  useEffect(() => {
+    //Dropdown menu closed when field is clicked away from
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        componentRef.current &&
+        !componentRef.current.contains(event.target as Node)
+      ) {
+        setShowDropdown(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
   const handleChange = (value: string) => {
     setInputValue(value);
   };
@@ -135,7 +152,7 @@ const PathService: React.FC<PathServiceProps> = ({ reset, rootPath, path, handle
   };
 
   return (
-    <div>
+    <div ref={componentRef}>
       <SearchInput
         ref={inputRef}
         placeholder="Type to find taxonomy path"
@@ -160,4 +177,4 @@ const PathService: React.FC<PathServiceProps> = ({ reset, rootPath, path, handle
   );
 };
 
-export default PathService;
+export default PathService;
\ No newline at end of file

From 50593b26e76efa17122fa5e525622a47a1533c01 Mon Sep 17 00:00:00 2001
From: Samarpita Bhaumik <samarpitabhaumik2017@gmail.com>
Date: Thu, 17 Oct 2024 10:48:33 +0530
Subject: [PATCH 2/2] Fixed the lint issues

Signed-off-by: Samarpita Bhaumik <samarpitabhaumik2017@gmail.com>
---
 src/components/PathService/PathService.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/components/PathService/PathService.tsx b/src/components/PathService/PathService.tsx
index 577bd50c..47c3476b 100644
--- a/src/components/PathService/PathService.tsx
+++ b/src/components/PathService/PathService.tsx
@@ -96,10 +96,7 @@ const PathService: React.FC<PathServiceProps> = ({ reset, rootPath, path, handle
   useEffect(() => {
     //Dropdown menu closed when field is clicked away from
     const handleClickOutside = (event: MouseEvent) => {
-      if (
-        componentRef.current &&
-        !componentRef.current.contains(event.target as Node)
-      ) {
+      if (componentRef.current && !componentRef.current.contains(event.target as Node)) {
         setShowDropdown(false);
       }
     };
@@ -177,4 +174,4 @@ const PathService: React.FC<PathServiceProps> = ({ reset, rootPath, path, handle
   );
 };
 
-export default PathService;
\ No newline at end of file
+export default PathService;