From 6ec3e7ee0c56fedc549dfe34e690208f67288f37 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Thu, 8 Sep 2022 16:19:27 +0200 Subject: [PATCH] Only send event change on valid range (ie. both start and end date) + do not refresh data on start date change but only on end date change --- app/views/spree/admin/orders/bulk_management.html.haml | 2 +- app/webpacker/controllers/flatpickr_controller.js | 7 +++++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/app/views/spree/admin/orders/bulk_management.html.haml b/app/views/spree/admin/orders/bulk_management.html.haml index e5fefd6b25..4008d10abc 100644 --- a/app/views/spree/admin/orders/bulk_management.html.haml +++ b/app/views/spree/admin/orders/bulk_management.html.haml @@ -23,7 +23,7 @@ %br %div{ data: { controller: "flatpickr", "flatpickr-mode-value": "range", "flatpickr-default-date": "{{ [startDate, endDate] }}" } } %input.datepicker.fullwidth{ class: "datepicker", data: { "flatpickr-target": "instance" } } - %input{ type: "text", id: 'start_date_filter', 'ng-model': "startDate", 'ng-change': 'refreshData()', 'ng-model-options': '{ debounce: 1000 }', data: { "flatpickr-target": "start" }, style: "display: none;", "confirm-change": "confirmRefresh()" } + %input{ type: "text", id: 'start_date_filter', 'ng-model': "startDate", data: { "flatpickr-target": "start" }, style: "display: none;", "confirm-change": "confirmRefresh()" } %input{ type: "text", id: 'end_date_filter', 'ng-model': "endDate", 'ng-change': 'refreshData()', 'ng-model-options': '{ debounce: 1000 }', data: { "flatpickr-target": "end" }, style: "display: none;", "confirm-change": "confirmRefresh()"} .one.column   .filter_select{ :class => "three columns" } diff --git a/app/webpacker/controllers/flatpickr_controller.js b/app/webpacker/controllers/flatpickr_controller.js index 2e166fab72..230d3c7d7c 100644 --- a/app/webpacker/controllers/flatpickr_controller.js +++ b/app/webpacker/controllers/flatpickr_controller.js @@ -66,8 +66,11 @@ export default class extends Flatpickr { ? this.fp.formatDate(selectedDates[1], this.config.dateFormat) : ""; // Also, send event to be sure that ng-model is well updated - this.startTarget.dispatchEvent(new Event("change")); - this.endTarget.dispatchEvent(new Event("change")); + // Send event only if range il valid, ie. start and end are not empty + if (this.startTarget.value && this.endTarget.value) { + this.startTarget.dispatchEvent(new Event("change")); + this.endTarget.dispatchEvent(new Event("change")); + } } }