From 051d3d7531111d8fb9df6398a698dfffa960c079 Mon Sep 17 00:00:00 2001
From: melvinchia3636 <melvinchia623600@gmail.com>
Date: Tue, 2 Jun 2026 23:36:44 +0800
Subject: [PATCH] =?UTF-8?q?fix(ui):=20improve=20DateInput=20calendar=20?=
 =?UTF-8?q?=E2=80=94=20add=20stopPropagation,=20set=20month/year=20width,?=
 =?UTF-8?q?=20remove=20duplicate=20mobile=20month=20selector,=20fix=20popp?=
 =?UTF-8?q?er=20z-index?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DateInput/components/CalendarHeader.tsx   | 35 ++++++-------------
 .../src/components/inputs/DateInput/index.css |  5 +++
 .../src/components/inputs/DateInput/index.tsx |  1 -
 3 files changed, 16 insertions(+), 25 deletions(-)

diff --git a/packages/ui/src/components/inputs/DateInput/components/CalendarHeader.tsx b/packages/ui/src/components/inputs/DateInput/components/CalendarHeader.tsx
index cda1d223a..97b4d98e7 100644
--- a/packages/ui/src/components/inputs/DateInput/components/CalendarHeader.tsx
+++ b/packages/ui/src/components/inputs/DateInput/components/CalendarHeader.tsx
@@ -42,7 +42,15 @@ export function CalendarHeader({
 
   return (
     <Text asChild color={{ base: 'bg-800', dark: 'bg-100' }}>
-      <Flex align="center" justify="between" px="md" py="sm">
+      <Flex
+        align="center"
+        justify="between"
+        px="md"
+        py="sm"
+        onMouseDown={e => {
+          e.stopPropagation()
+        }}
+      >
         <Button
           disabled={prevMonthButtonDisabled}
           icon="tabler:chevron-left"
@@ -64,6 +72,7 @@ export function CalendarHeader({
             r="md"
             renderContent={value => <Text size="base">{value}</Text>}
             value={dayjs(date).year()}
+            width="min-content"
             onChange={changeYear}
           >
             {years.map(option => (
@@ -77,41 +86,19 @@ export function CalendarHeader({
               dark: colorWithOpacity('bg-700', '50%'),
               darkHover: 'bg-700'
             }}
-            display={{ base: 'none', sm: 'flex' }}
             pl="sm"
             pr="sm"
             py="sm"
             r="md"
             renderContent={value => <Text size="base">{value}</Text>}
             value={months[dayjs(date).month()]}
+            width="16em"
             onChange={value => changeMonth(months.indexOf(value))}
           >
             {months.map(option => (
               <ListboxOption key={option} label={option} value={option} />
             ))}
           </Listbox>
-          <Listbox<string>
-            display={{ base: 'flex', sm: 'none' }}
-            pr="xl"
-            py="sm"
-            r="md"
-            renderContent={value => (
-              <Text size="base" weight="medium">
-                {value.slice(0, 3)}
-              </Text>
-            )}
-            style={{ paddingLeft: '0.75rem' }}
-            value={months[dayjs(date).month()]}
-            onChange={value => changeMonth(months.indexOf(value))}
-          >
-            {months.map(option => (
-              <ListboxOption
-                key={option}
-                label={option.slice(0, 3)}
-                value={option}
-              />
-            ))}
-          </Listbox>
         </Flex>
         <Button
           disabled={nextMonthButtonDisabled}
diff --git a/packages/ui/src/components/inputs/DateInput/index.css b/packages/ui/src/components/inputs/DateInput/index.css
index 4d6c81fc4..55e918693 100644
--- a/packages/ui/src/components/inputs/DateInput/index.css
+++ b/packages/ui/src/components/inputs/DateInput/index.css
@@ -202,3 +202,8 @@
 .react-datepicker-wrapper {
   width: 100% !important;
 }
+
+
+.react-datepicker-popper {
+  z-index: 9999 !important;
+}
diff --git a/packages/ui/src/components/inputs/DateInput/index.tsx b/packages/ui/src/components/inputs/DateInput/index.tsx
index c7c6780bc..cc1c6f5d4 100644
--- a/packages/ui/src/components/inputs/DateInput/index.tsx
+++ b/packages/ui/src/components/inputs/DateInput/index.tsx
@@ -114,7 +114,6 @@ export function DateInput({
               placeholderText={`August 7, ${dayjs().year()}${
                 hasTime ? ' 08:07 AM' : ''
               }`}
-              popperClassName="-mx-13"
               popperPlacement="bottom-start"
               portalId="app"
               renderCustomHeader={(props: {