fix: UDatePickerRange: focus date inputs in a custom range on a select range

itsJohnnyGrid · itsJohnnyGrid · commit 733709d7d5ec · 2025-11-26T09:24:47.000+08:00
diff --git a/src/ui.form-calendar/UCalendar.vue b/src/ui.form-calendar/UCalendar.vue
@@ -90,6 +90,12 @@ const emit = defineEmits([
    * @property {string} value
    */
   "userDateChange",
+
+  /**
+   * Triggers when range date values (from or to) change.
+   * @property {object} value
+   */
+  "change-range",
 ]);
 
 const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
@@ -253,6 +259,7 @@ const localValue = computed({
       if (newDate && newDateTo) {
         tempRangeValue.value = null;
         emit("update:modelValue", newRangeDate);
+        emit("change-range", newRangeDate);
       }
     } else {
       emit("update:modelValue", newDate);
@@ -468,8 +475,10 @@ function onInputDate(newDate: Date | null) {
       localValue.value = updatedValue;
 
       emit("input", updatedValue);
+      emit("change-range", updatedValue);
     } else {
       tempRangeValue.value = updatedValue;
+      emit("change-range", updatedValue);
     }
   } else {
     localValue.value = newDate;
diff --git a/src/ui.form-date-picker-range/UDatePickerRange.vue b/src/ui.form-date-picker-range/UDatePickerRange.vue
@@ -764,7 +764,7 @@ watchEffect(() => {
           v-bind="datepickerCalendarAttrs as KeyAttrsWithConfig<UCalendarConfig>"
           range
           :data-test="getDataTest('calendar')"
-          @input="onInputCalendar"
+          @change-range="onInputCalendar"
         />
       </div>
     </Transition>
