From 192ed9ba8dc90a9d66fa0158a77812ad35dace33 Mon Sep 17 00:00:00 2001
From: Vamsi Krishna <46787868+vamsikrishnamathala@users.noreply.github.com>
Date: Fri, 12 Dec 2025 15:43:30 +0530
Subject: [PATCH] [WEB-5654]fix: custom select selection and dropdown close
 #8324

---
 packages/ui/src/dropdowns/custom-select.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/dropdowns/custom-select.tsx b/packages/ui/src/dropdowns/custom-select.tsx
index 4423bd49c6..c184dd70d0 100644
--- a/packages/ui/src/dropdowns/custom-select.tsx
+++ b/packages/ui/src/dropdowns/custom-select.tsx
@@ -146,9 +146,13 @@ function Option(props: ICustomSelectItemProps) {
   const { children, value, className } = props;
   const closeDropdown = useContext(DropdownContext);
 
-  const handleMouseDown = useCallback(() => {
+  const handleClick = useCallback(() => {
     // Close dropdown for both new and already-selected options.
-    requestAnimationFrame(() => closeDropdown());
+    // Use setTimeout to ensure HeadlessUI's onChange handler fires first for new selections.
+    // For already-selected options, this ensures the dropdown closes since onChange won't fire.
+    setTimeout(() => {
+      closeDropdown();
+    }, 0);
   }, [closeDropdown]);
 
   return (
@@ -163,9 +167,10 @@ function Option(props: ICustomSelectItemProps) {
           className
         )
       }
+      onClick={handleClick}
     >
       {({ selected }) => (
-        <div onMouseDown={handleMouseDown} className="flex items-center justify-between gap-2 w-full">
+        <div className="flex items-center justify-between gap-2 w-full">
           {children}
           {selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
         </div>