From 0b9cad8aae868f26e1b22dbc1a51e2e4b7455ff6 Mon Sep 17 00:00:00 2001 From: Paul Derscheid Date: Fri, 30 Jan 2026 19:27:38 +0100 Subject: [PATCH] Bug 39916: (QA follow-up) Fix startRange class lost on month navigation When selecting a booking start date that triggers month navigation (e.g., selecting Feb 1 while viewing January), the flatpickr calendar would lose the 'startRange' CSS class on the selected date. This occurred because setting maxDate in the onChange handler triggered a calendar redraw, and flatpickr only applies startRange during the initial click event, not during redraws. This caused the Cypress test "should handle date range validation correctly" to fail on dates near month boundaries (e.g., January 30). The fix re-applies the startRange class after the maxDate is set, using setTimeout to ensure it runs after the redraw completes. A guard ensures this only happens when exactly one date is selected, preventing interference with end date selection. To test: - Apply patch - Open a biblio detail page with bookable items - Click "Place booking" - Select a patron, pickup location, and item - In the date picker, click a date that's in the next month (visible in the "next month" area of the calendar) - Verify the selected date shows the startRange styling (highlighted as the range start) - Select an end date - Verify the range is properly selected and the form can be submitted - Run Cypress tests: yarn cypress run --spec t/cypress/integration/Circulation/bookingsModalDatePicker_spec.ts - Verify all tests pass --- .../prog/js/modals/place_booking.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/koha-tmpl/intranet-tmpl/prog/js/modals/place_booking.js b/koha-tmpl/intranet-tmpl/prog/js/modals/place_booking.js index 8bd0a6aed88..29707ebfceb 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/modals/place_booking.js +++ b/koha-tmpl/intranet-tmpl/prog/js/modals/place_booking.js @@ -773,6 +773,22 @@ $("#placeBookingModal").on("show.bs.modal", function (e) { // Update the maxDate option of the flatpickr instance instance.set("maxDate", maxDate); + + // Re-apply startRange class after redraw + // Flatpickr may lose this class when maxDate triggers a redraw + setTimeout(() => { + // Only apply if still in "start date only" state + if (instance.selectedDates.length !== 1) { + return; + } + instance.calendarContainer + .querySelectorAll(".flatpickr-day.selected") + .forEach(el => { + if (!el.classList.contains("startRange")) { + el.classList.add("startRange"); + } + }); + }, 0); } // Range set, update hidden fields and set available items else if (selectedDates[0] && selectedDates[1]) { -- 2.39.5