From 5584f173e54abb0ce298d05ee8315b482e86ca70 Mon Sep 17 00:00:00 2001 From: Martin Renvoize Date: Wed, 31 Dec 2025 12:17:42 +0000 Subject: [PATCH] Bug 39916: Fix booking modal race conditions and redraw issues This patch addresses two critical issues in the booking modal: 1. Race condition in edit mode: When editing a booking, the item selection would sometimes fail to properly initialize because the item options weren't fully loaded with their data attributes. This caused the itemtype field to not auto-populate correctly. Fixed by moving the item pre-selection to occur after a brief delay and ensuring the select2:select event is triggered with proper data parameters including the element reference. 2. Flatpickr redraw issue: The datepicker would lose its disabled dates after certain operations because the disable configuration wasn't being reapplied during redraws. Fixed by explicitly setting the disable configuration before calling redraw() to ensure disabled dates are properly maintained. Additionally fixes a scope issue with the booking loop variable. Test plan: 1. Create a booking with specific dates 2. Edit the booking - verify the item and itemtype are correctly selected 3. Change selections in the modal - verify disabled dates remain correct 4. Create new bookings - verify date restrictions work properly --- .../prog/js/modals/place_booking.js | 29 +++++++++++++++---- 1 file changed, 23 insertions(+), 6 deletions(-) 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 634cce0c36e..8bd0a6aed88 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/modals/place_booking.js +++ b/koha-tmpl/intranet-tmpl/prog/js/modals/place_booking.js @@ -170,6 +170,7 @@ $("#placeBookingModal").on("show.bs.modal", function (e) { if (changed) { periodPicker.clear(); } + periodPicker.set("disable", periodPicker.config.disable); periodPicker.redraw(); // Enable flatpickr now we have data we need @@ -458,7 +459,7 @@ $("#placeBookingModal").on("show.bs.modal", function (e) { } // iterate existing bookings - for (booking of bookings) { + for (let booking of bookings) { // Skip if we're editing this booking if ( booking_id && @@ -1112,6 +1113,27 @@ function setFormValues( }); } + // If passed an itemnumber, pre-select + if (booking_item_id) { + // Wait a bit for the item options to be fully created with data attributes + setTimeout(function () { + $("#booking_item_id").val(booking_item_id).trigger("change"); + // Also trigger the select2:select event with proper data + let selectedOption = $("#booking_item_id option:selected")[0]; + if (selectedOption) { + $("#booking_item_id").trigger({ + type: "select2:select", + params: { + data: { + id: booking_item_id, + element: selectedOption, + }, + }, + }); + } + }, 100); + } + // Set booking start & end if this is an edit if (start_date) { // Allow invalid pre-load so setDate can set date range @@ -1127,11 +1149,6 @@ function setFormValues( else { periodPicker.redraw(); } - - // If passed an itemnumber, pre-select - if (booking_item_id) { - $("#booking_item_id").val(booking_item_id).trigger("change"); - } } $("#placeBookingForm").on("submit", function (e) { -- 2.52.0