Select: allow external component close the popover

glints-dev · Sep 19, 2024 · c09ecac · c09ecac
1 parent b64b0ed
commit c09ecac
Showing 1 changed file with 8 additions and 0 deletions.
diff --git 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?.();