From c09ecace8fddd819359ef5ff1602f3a210af00a8 Mon Sep 17 00:00:00 2001
From: Tai-DucTran <taitran.deve@gmail.com>
Date: Thu, 19 Sep 2024 13:16:47 +0700
Subject: [PATCH] Select: allow external component close the popover

---
 src/@next/Select/Select.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/@next/Select/Select.tsx b/src/@next/Select/Select.tsx
index 168570644..c7fcf5c93 100644
--- a/src/@next/Select/Select.tsx
+++ b/src/@next/Select/Select.tsx
@@ -62,6 +62,7 @@ export interface SelectProps {
   border?: string;
   borderRadius?: string;
   required?: boolean;
+  isPopoverActive?: boolean;
   isPlaceholderFloating?: boolean;
 }
 
@@ -99,6 +100,7 @@ export const Select = ({
   borderRadius,
   required,
   isPlaceholderFloating,
+  isPopoverActive,
 }: SelectProps) => {
   const [popoverActive, setPopoverActive] = useState(false);
   const [optionListHeight, setOptionListHeight] = useState('');
@@ -126,6 +128,12 @@ export const Select = ({
     setMenuOptions(newState);
   };
 
+  useEffect(() => {
+    if (isPopoverActive === false && popoverActive) {
+      setPopoverActive(false);
+    }
+  }, [isPopoverActive, popoverActive]);
+
   const handleClose = () => {
     setPopoverActive(false);
     onClose?.();