From 630a1e65c17e1038169cd72b617d043195e6324c Mon Sep 17 00:00:00 2001
From: Vineeth Asok Kumar <me@vineethasok.com>
Date: Mon, 9 Oct 2023 18:34:59 +0200
Subject: [PATCH] Add onOpenChange function as prop to select (#173)

---
 src/components/Select/MultiSelect.tsx  | 14 +++++++++++++-
 src/components/Select/SingleSelect.tsx | 14 +++++++++++---
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/components/Select/MultiSelect.tsx b/src/components/Select/MultiSelect.tsx
index 0030600c..70a73e5c 100644
--- a/src/components/Select/MultiSelect.tsx
+++ b/src/components/Select/MultiSelect.tsx
@@ -12,6 +12,7 @@ export interface MultiSelectProps
   onSelect?: (value: Array<string>) => void;
   value?: Array<string>;
   defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
 }
 
 export const MultiSelect = ({
@@ -20,6 +21,7 @@ export const MultiSelect = ({
   onSelect: onSelectProp,
   options,
   children,
+  onOpenChange: onOpenChangeProp,
   ...props
 }: MultiSelectProps) => {
   const [selectedValues, setSelectedValues] = useState<Array<string>>(
@@ -27,6 +29,16 @@ export const MultiSelect = ({
   );
   const [open, setOpen] = useState(false);
 
+  const onOpenChange = useCallback(
+    (open: boolean) => {
+      setOpen(open);
+      if (typeof onOpenChangeProp === "function") {
+        onOpenChangeProp(open);
+      }
+    },
+    [onOpenChangeProp]
+  );
+
   useEffect(() => {
     setSelectedValues(valueProp ?? []);
   }, [valueProp]);
@@ -67,7 +79,7 @@ export const MultiSelect = ({
       onChange={onChange}
       value={valueProp ?? selectedValues}
       open={open}
-      onOpenChange={setOpen}
+      onOpenChange={onOpenChange}
       onSelect={onSelect}
       multiple
       {...conditionalProps}
diff --git a/src/components/Select/SingleSelect.tsx b/src/components/Select/SingleSelect.tsx
index 596f6c6c..7ba5a3d1 100644
--- a/src/components/Select/SingleSelect.tsx
+++ b/src/components/Select/SingleSelect.tsx
@@ -11,6 +11,7 @@ export interface SelectProps
   onSelect?: (value: string) => void;
   value?: string;
   placeholder?: string;
+  onOpenChange?: (open: boolean) => void;
 }
 
 export const Select = ({
@@ -19,6 +20,7 @@ export const Select = ({
   onSelect: onSelectProp,
   options,
   children,
+  onOpenChange: onOpenChangeProp,
   ...props
 }: SelectProps) => {
   const [selectedValues, setSelectedValues] = useState<Array<string>>(
@@ -26,9 +28,15 @@ export const Select = ({
   );
   const [open, setOpen] = useState(false);
 
-  const onOpenChange = useCallback((open: boolean) => {
-    setOpen(open);
-  }, []);
+  const onOpenChange = useCallback(
+    (open: boolean) => {
+      setOpen(open);
+      if (typeof onOpenChangeProp === "function") {
+        onOpenChangeProp(open);
+      }
+    },
+    [onOpenChangeProp]
+  );
 
   const onSelect = useCallback(
     (value: string) => {