From 9b6c84c4c84a522643836a57e893f2599ad9dadb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9C=A0=EB=B3=91=EC=B2=A0?= <zomking@gmail.com>
Date: Mon, 16 Mar 2026 17:45:23 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20[ui]=20date-picker,=20date-range-picker,?=
 =?UTF-8?q?=20searchable-select,=20multi-select-combobox,=20time-picker=20?=
 =?UTF-8?q?=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ui/date-picker.tsx           | 10 ++++++++++
 src/components/ui/date-range-picker.tsx     | 10 ++++++++--
 src/components/ui/multi-select-combobox.tsx | 10 ++++++++--
 src/components/ui/searchable-select.tsx     | 10 ++++++++++
 src/components/ui/time-picker.tsx           | 10 ++++++++--
 5 files changed, 44 insertions(+), 6 deletions(-)

diff --git a/src/components/ui/date-picker.tsx b/src/components/ui/date-picker.tsx
index 6c7ea6b4..f8e50817 100644
--- a/src/components/ui/date-picker.tsx
+++ b/src/components/ui/date-picker.tsx
@@ -163,6 +163,16 @@ function DatePicker({
         align={align}
         side={side}
         sideOffset={sideOffset}
+        onPointerDownOutside={(e) => {
+          // Dialog cascade 방지 (Portal 렌더링으로 인한 모달 닫힘 방지)
+          // 단, Popover는 수동으로 닫기
+          e.preventDefault();
+          setOpen(false);
+        }}
+        onInteractOutside={(e) => {
+          e.preventDefault();
+          setOpen(false);
+        }}
       >
         <div className="p-3">
           {showMonthPicker ? (
diff --git a/src/components/ui/date-range-picker.tsx b/src/components/ui/date-range-picker.tsx
index 714ae736..0859b5e5 100644
--- a/src/components/ui/date-range-picker.tsx
+++ b/src/components/ui/date-range-picker.tsx
@@ -199,8 +199,14 @@ function DateRangePicker({
       <PopoverContent
         className="w-auto p-0"
         align={align}
-        onPointerDownOutside={(e) => e.preventDefault()}
-        onInteractOutside={(e) => e.preventDefault()}
+        onPointerDownOutside={(e) => {
+          e.preventDefault();
+          setOpen(false);
+        }}
+        onInteractOutside={(e) => {
+          e.preventDefault();
+          setOpen(false);
+        }}
       >
         <div className="p-3">
           {showMonthPicker ? (
diff --git a/src/components/ui/multi-select-combobox.tsx b/src/components/ui/multi-select-combobox.tsx
index 7ed308c7..df91e3d8 100644
--- a/src/components/ui/multi-select-combobox.tsx
+++ b/src/components/ui/multi-select-combobox.tsx
@@ -88,8 +88,14 @@ export function MultiSelectCombobox({
       <PopoverContent
         className="w-[200px] p-0"
         align="start"
-        onPointerDownOutside={(e) => e.preventDefault()}
-        onInteractOutside={(e) => e.preventDefault()}
+        onPointerDownOutside={(e) => {
+          e.preventDefault();
+          setOpen(false);
+        }}
+        onInteractOutside={(e) => {
+          e.preventDefault();
+          setOpen(false);
+        }}
       >
         <Command>
           <CommandInput placeholder={searchPlaceholder} />
diff --git a/src/components/ui/searchable-select.tsx b/src/components/ui/searchable-select.tsx
index 709b1ff9..7d639362 100644
--- a/src/components/ui/searchable-select.tsx
+++ b/src/components/ui/searchable-select.tsx
@@ -191,6 +191,16 @@ export function SearchableSelect({
       <PopoverContent
         className="w-[--radix-popover-trigger-width] p-0"
         align="start"
+        onPointerDownOutside={(e) => {
+          // Dialog cascade 방지 (Portal 렌더링으로 인한 모달 닫힘 방지)
+          // 단, Popover는 수동으로 닫기
+          e.preventDefault();
+          handleOpenChange(false);
+        }}
+        onInteractOutside={(e) => {
+          e.preventDefault();
+          handleOpenChange(false);
+        }}
       >
         <Command shouldFilter={!isServerSearch}>
           <CommandInput
diff --git a/src/components/ui/time-picker.tsx b/src/components/ui/time-picker.tsx
index e7dde8e9..2e130cbb 100644
--- a/src/components/ui/time-picker.tsx
+++ b/src/components/ui/time-picker.tsx
@@ -138,8 +138,14 @@ function TimePicker({
       <PopoverContent
         className="w-auto p-0"
         align="start"
-        onPointerDownOutside={(e) => e.preventDefault()}
-        onInteractOutside={(e) => e.preventDefault()}
+        onPointerDownOutside={(e) => {
+          e.preventDefault();
+          setOpen(false);
+        }}
+        onInteractOutside={(e) => {
+          e.preventDefault();
+          setOpen(false);
+        }}
       >
         <div className="p-3">
           {/* 헤더 */}