From 0b6a3234a5b0504845b964e91a16240bdabab8e1 Mon Sep 17 00:00:00 2001
From: miloschwartz <mschwartz10612@gmail.com>
Date: Tue, 26 May 2026 22:47:05 -0700
Subject: [PATCH] auto close labels dropdown on select but not on checkbox

---
 src/components/TableLabelsCell.tsx |  1 +
 src/components/labels-selector.tsx | 26 +++++++++++++++++---------
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/components/TableLabelsCell.tsx b/src/components/TableLabelsCell.tsx
index 4d4f28066..5ce445999 100644
--- a/src/components/TableLabelsCell.tsx
+++ b/src/components/TableLabelsCell.tsx
@@ -75,6 +75,7 @@ export function TableLabelsCell({
                         orgId={orgId}
                         selectedLabels={localLabels}
                         toggleLabel={toggleLabel}
+                        onClose={() => handleOpenChange(false)}
                     />
                 </PopoverContent>
             </Popover>
diff --git a/src/components/labels-selector.tsx b/src/components/labels-selector.tsx
index 1187f72d9..eefa87d8a 100644
--- a/src/components/labels-selector.tsx
+++ b/src/components/labels-selector.tsx
@@ -36,6 +36,7 @@ export type LabelsSelectorProps = {
     orgId: string;
     selectedLabels: SelectedLabel[];
     toggleLabel: (newlabel: SelectedLabel, action: "detach" | "attach") => void;
+    onClose?: () => void;
 };
 
 export const LABEL_COLORS = {
@@ -51,7 +52,8 @@ export const LABEL_COLORS = {
 export function LabelsSelector({
     orgId,
     selectedLabels,
-    toggleLabel
+    toggleLabel,
+    onClose
 }: LabelsSelectorProps) {
     const t = useTranslations();
     const [labelSearchQuery, setlabelsSearchQuery] = useState("");
@@ -200,18 +202,24 @@ export function LabelsSelector({
                                         ? "detach"
                                         : "attach"
                                 );
-                                // } else {
-                                //     onSelectionChange([
-                                //         ...selectedLabels,
-                                //         label
-                                //     ]);
-                                // }
+                                onClose?.();
                             }}
                         >
                             <Checkbox
-                                className="pointer-events-none shrink-0"
+                                className="shrink-0"
                                 checked={selectedIds.has(label.labelId)}
-                                onCheckedChange={() => {}}
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                }}
+                                onPointerDown={(e) => {
+                                    e.stopPropagation();
+                                }}
+                                onCheckedChange={(checked) => {
+                                    toggleLabel(
+                                        label,
+                                        checked ? "attach" : "detach"
+                                    );
+                                }}
                                 aria-hidden
                                 tabIndex={-1}
                             />