From 96d8837595819413358bb7ea59bc1f68eda0765d Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 18 Dec 2025 14:13:22 +0000
Subject: [PATCH 1/5] Automatically close the datepicker when you select a date

---
 resources/js/components/ui/DatePicker/DatePicker.vue | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/ui/DatePicker/DatePicker.vue b/resources/js/components/ui/DatePicker/DatePicker.vue
index f6f9d5ebdaf..54345725491 100644
--- a/resources/js/components/ui/DatePicker/DatePicker.vue
+++ b/resources/js/components/ui/DatePicker/DatePicker.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import {
     DatePickerAnchor,
     DatePickerContent,
@@ -27,6 +27,8 @@ import Icon from '../Icon/Icon.vue';
 
 const emit = defineEmits(['update:modelValue']);
 
+const open = ref(false);
+
 const props = defineProps({
     date: { type: String, default: null },
     badge: { type: String, default: null },
@@ -82,6 +84,11 @@ const calendarEvents = computed(() => ({
             event.minute = 0;
             event.second = 0;
             event.millisecond = 0;
+            
+            // Close the popup when a date is selected
+            if (!props.inline) {
+                open.value = false;
+            }
         }
 
         emit('update:modelValue', event);
@@ -122,6 +129,8 @@ const getInputLabel = (part) => {
             :granularity="granularity"
             :locale="$date.locale"
             :disabled="disabled || readOnly"
+            :open="open"
+            @update:open="open = $event"
             @update:model-value="emit('update:modelValue', $event)"
             v-bind="$attrs"
             prevent-deselect

From 782928829ca6870171e158ad1fc378bce1ad5da7 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 18 Dec 2025 14:14:50 +0000
Subject: [PATCH 2/5] Automatically close the datepicker range when you select
 the last date

---
 .../components/ui/DateRangePicker/DateRangePicker.vue | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/ui/DateRangePicker/DateRangePicker.vue b/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
index fd22b8a47b0..0cdbf4d69be 100644
--- a/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
+++ b/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import {
     DateRangePickerCalendar,
     DateRangePickerCell,
@@ -27,6 +27,8 @@ import { parseAbsoluteToLocal } from '@internationalized/date';
 
 const emit = defineEmits(['update:modelValue']);
 
+const open = ref(false);
+
 const props = defineProps({
     date: { type: String, default: null },
     badge: { type: String, default: null },
@@ -79,6 +81,11 @@ const calendarEvents = computed(() => ({
             event.end.minute = 0;
             event.end.second = 0;
             event.end.millisecond = 0;
+            
+            // Close the popup when both start and end dates are selected
+            if (!props.inline && event.start && event.end) {
+                open.value = false;
+            }
         }
 
         emit('update:modelValue', event)
@@ -93,6 +100,8 @@ const calendarEvents = computed(() => ({
             :granularity="granularity"
             :locale="$date.locale"
             :disabled="disabled || readOnly"
+            :open="open"
+            @update:open="open = $event"
             @update:model-value="emit('update:modelValue', $event)"
             v-bind="$attrs"
             prevent-deselect

From 969f00b301e4b4937aadb051a1d75641c049ae46 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Thu, 18 Dec 2025 16:26:47 -0500
Subject: [PATCH 3/5] Revert "Automatically close the datepicker when you
 select a date"

This reverts commit 96d8837595819413358bb7ea59bc1f68eda0765d.
---
 resources/js/components/ui/DatePicker/DatePicker.vue | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/resources/js/components/ui/DatePicker/DatePicker.vue b/resources/js/components/ui/DatePicker/DatePicker.vue
index 54345725491..f6f9d5ebdaf 100644
--- a/resources/js/components/ui/DatePicker/DatePicker.vue
+++ b/resources/js/components/ui/DatePicker/DatePicker.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 import {
     DatePickerAnchor,
     DatePickerContent,
@@ -27,8 +27,6 @@ import Icon from '../Icon/Icon.vue';
 
 const emit = defineEmits(['update:modelValue']);
 
-const open = ref(false);
-
 const props = defineProps({
     date: { type: String, default: null },
     badge: { type: String, default: null },
@@ -84,11 +82,6 @@ const calendarEvents = computed(() => ({
             event.minute = 0;
             event.second = 0;
             event.millisecond = 0;
-            
-            // Close the popup when a date is selected
-            if (!props.inline) {
-                open.value = false;
-            }
         }
 
         emit('update:modelValue', event);
@@ -129,8 +122,6 @@ const getInputLabel = (part) => {
             :granularity="granularity"
             :locale="$date.locale"
             :disabled="disabled || readOnly"
-            :open="open"
-            @update:open="open = $event"
             @update:model-value="emit('update:modelValue', $event)"
             v-bind="$attrs"
             prevent-deselect

From b8d6f6993e9314b5838165516ac42873e8d2bb19 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Thu, 18 Dec 2025 16:26:47 -0500
Subject: [PATCH 4/5] Revert "Automatically close the datepicker range when you
 select the last date"

This reverts commit 782928829ca6870171e158ad1fc378bce1ad5da7.
---
 .../components/ui/DateRangePicker/DateRangePicker.vue | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/resources/js/components/ui/DateRangePicker/DateRangePicker.vue b/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
index 0cdbf4d69be..fd22b8a47b0 100644
--- a/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
+++ b/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 import {
     DateRangePickerCalendar,
     DateRangePickerCell,
@@ -27,8 +27,6 @@ import { parseAbsoluteToLocal } from '@internationalized/date';
 
 const emit = defineEmits(['update:modelValue']);
 
-const open = ref(false);
-
 const props = defineProps({
     date: { type: String, default: null },
     badge: { type: String, default: null },
@@ -81,11 +79,6 @@ const calendarEvents = computed(() => ({
             event.end.minute = 0;
             event.end.second = 0;
             event.end.millisecond = 0;
-            
-            // Close the popup when both start and end dates are selected
-            if (!props.inline && event.start && event.end) {
-                open.value = false;
-            }
         }
 
         emit('update:modelValue', event)
@@ -100,8 +93,6 @@ const calendarEvents = computed(() => ({
             :granularity="granularity"
             :locale="$date.locale"
             :disabled="disabled || readOnly"
-            :open="open"
-            @update:open="open = $event"
             @update:model-value="emit('update:modelValue', $event)"
             v-bind="$attrs"
             prevent-deselect

From bf8d552bbc43ed42841b90c40e87cf4beaaf86ce Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Thu, 18 Dec 2025 16:28:13 -0500
Subject: [PATCH 5/5] update reka which now has a close-on-select prop

---
 package-lock.json                                           | 6 +++---
 resources/js/components/ui/DatePicker/DatePicker.vue        | 1 +
 .../js/components/ui/DateRangePicker/DateRangePicker.vue    | 1 +
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b224439b6ee..1301083e906 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6997,9 +6997,9 @@
       }
     },
     "node_modules/reka-ui": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.3.2.tgz",
-      "integrity": "sha512-lCysSCILH2uqShEnt93/qzlXnB7ySvK7scR0Q5C+a2iXwFVzHhvZQsMaSnbQYueoCihx6yyUZTYECepnmKrbRA==",
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.6.1.tgz",
+      "integrity": "sha512-XK7cJDQoNuGXfCNzBBo/81Yg/OgjPwvbabnlzXG2VsdSgNsT6iIkuPBPr+C0Shs+3bb0x0lbPvgQAhMSCKm5Ww==",
       "license": "MIT",
       "dependencies": {
         "@floating-ui/dom": "^1.6.13",
diff --git a/resources/js/components/ui/DatePicker/DatePicker.vue b/resources/js/components/ui/DatePicker/DatePicker.vue
index f6f9d5ebdaf..44a7616c355 100644
--- a/resources/js/components/ui/DatePicker/DatePicker.vue
+++ b/resources/js/components/ui/DatePicker/DatePicker.vue
@@ -129,6 +129,7 @@ const getInputLabel = (part) => {
             role="group"
             :aria-label="__('Date picker')"
             :aria-required="required"
+            close-on-select
         >
             <DatePickerField v-slot="{ segments }" class="w-full">
                 <DatePickerAnchor as-child>
diff --git a/resources/js/components/ui/DateRangePicker/DateRangePicker.vue b/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
index fd22b8a47b0..90322b2060a 100644
--- a/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
+++ b/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
@@ -98,6 +98,7 @@ const calendarEvents = computed(() => ({
             prevent-deselect
             hide-time-zone
             :placeholder="placeholder"
+            close-on-select
         >
             <DateRangePickerField v-slot="{ segments }" class="w-full">
                 <div