MOSIP-32957: Filter dropdown fixes (#379)

Signed-off-by: SwethaKrish4 <[email protected]>
mosip · May 27, 2024 · 68511e2 · 68511e2
1 parent 3f07b21
commit 68511e2
Showing 1 changed file with 10 additions and 3 deletions.
diff --git a/pmp-reactjs-ui/src/pages/common/fields/DropdownComponent.js b/pmp-reactjs-ui/src/pages/common/fields/DropdownComponent.js
@@ -1,13 +1,20 @@
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
+import { handleMouseClickForDropdown } from '../../../utils/AppUtils';
 
 function DropdownComponent({ fieldName, dropdownDataList, onDropDownChangeEvent, fieldNameKey, dropDownPlaceHolder }) {
 
     const { t } = useTranslation();
 
     const [selectedDropdownEntry, setSelectedDropdownEntry] = useState("");
     const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+    const dropdownRef = useRef(null);
+
+    useEffect(() => {
+        const clickOutSideDropdown = handleMouseClickForDropdown(dropdownRef, () => setIsDropdownOpen(false));
+        return clickOutSideDropdown;
+    }, [dropdownRef]);
 
     const changeDropdownSelection = (selectedid) => {
         setSelectedDropdownEntry(selectedid);
@@ -23,7 +30,7 @@ function DropdownComponent({ fieldName, dropdownDataList, onDropDownChangeEvent,
             <label className="block text-indigo-900 text-sm font-semibold mb-2">
                 {t(fieldNameKey)}:
             </label>
-            <div className="relative w-full">
+            <div className="relative w-full" ref={dropdownRef}>
                 <button onClick={openDropdown} className="flex items-center justify-between w-[282px] h-10 px-2 py-2 border border-gray-400 bg-white rounded-[4px] text-base text-[15px] text-gray-800 leading-tight focus:outline-none focus:shadow-none" type="button">
                     <span>{
                         selectedDropdownEntry ?
@@ -42,7 +49,7 @@ function DropdownComponent({ fieldName, dropdownDataList, onDropDownChangeEvent,
                                     return (
                                         <div key={index} className="min-h-3">
                                             <button
-                                                className={`block w-full px-4 py-2 text-left text-base text-blue-950
+                                                className={`block w-full h-8 px-4 py-1 text-left text-base text-blue-950
                                                     ${selectedDropdownEntry === dropdownItem.fieldCode ? 'bg-gray-100' : 'hover:bg-gray-100'}`}
                                                 onClick={() => changeDropdownSelection(dropdownItem.fieldValue)}>
                                                 {dropdownItem.fieldCode}