From dadbc1cc277df2dc8afc6433b08068cf5a9c2243 Mon Sep 17 00:00:00 2001
From: ekachxaidze98 <65679299+ekachxaidze98@users.noreply.github.com>
Date: Tue, 28 Nov 2023 17:11:17 +0400
Subject: [PATCH] CORE-4722: close drop down (#1028)

---
 .../modal/registration/institution-select.jsx  | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/components/modal/registration/institution-select.jsx b/components/modal/registration/institution-select.jsx
index ff017964..5de390b4 100644
--- a/components/modal/registration/institution-select.jsx
+++ b/components/modal/registration/institution-select.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import { TextField } from '@oacore/design'
 
 import styles from './styles.module.scss'
@@ -10,6 +10,7 @@ const DropdownInput = ({
   organisationNameSuggestions,
 }) => {
   const [isOpen, setIsOpen] = useState(false)
+  const dropdownRef = useRef(null)
 
   const handleInputChange = (event) => {
     bindOrganisationName.onChange(event)
@@ -23,8 +24,21 @@ const DropdownInput = ({
 
   const hasValue = !!bindOrganisationName.value
 
+  const handleClickOutside = (event) => {
+    if (dropdownRef.current && !dropdownRef.current.contains(event.target))
+      setIsOpen(false)
+  }
+
+  useEffect(() => {
+    document.addEventListener('click', handleClickOutside)
+
+    return () => {
+      document.removeEventListener('click', handleClickOutside)
+    }
+  }, [])
+
   return (
-    <div className={styles.dropdownInput}>
+    <div className={styles.dropdownInput} ref={dropdownRef}>
       <TextField
         id={elemOrganisationName}
         name={elemOrganisationName}