fix(Calendar, DatePicker, DateRangePicker): if a date is selected don't show a placeholder when the mouse leave the calendar

mrholek · mrholek · commit 0ae145e28e5d · 2023-08-09T17:14:04.000+02:00
diff --git a/js/src/calendar.js b/js/src/calendar.js
@@ -35,6 +35,7 @@ const EVENT_KEY = `.${DATA_KEY}`
 const DATA_API_KEY = '.data-api'
 
 const EVENT_CALENDAR_DATE_CHANGE = `calendarDateChange${EVENT_KEY}`
+const EVENT_CALENDAR_MOUSE_LEAVE = `calendarMouseleave${EVENT_KEY}`
 const EVENT_CELL_HOVER = `cellHover${EVENT_KEY}`
 const EVENT_END_DATE_CHANGE = `endDateChange${EVENT_KEY}`
 const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`
@@ -212,6 +213,10 @@ class Calendar extends BaseComponent {
       this._view = 'years'
       this._updateCalendar()
     })
+
+    EventHandler.on(this._element, 'mouseleave', 'table', () => {
+      EventHandler.trigger(this._element, EVENT_CALENDAR_MOUSE_LEAVE)
+    })
   }
 
   _setCalendarDate(date) {
diff --git a/js/src/date-range-picker.js b/js/src/date-range-picker.js
@@ -415,6 +415,16 @@ class DateRangePicker extends Picker {
       this._updateCalendars()
     })
 
+    EventHandler.on(calendarEl, 'calendarMouseleave.coreui.calendar', () => {
+      if (this._startDate) {
+        this._startInput.value = this._setInputValue(this._startDate)
+      }
+
+      if (this._endDate) {
+        this._endInput.value = this._setInputValue(this._endDate)
+      }
+    })
+
     if (this._config.timepicker) {
       if (this._mobile || (this._range && this._config.calendars === 1)) {
         const timePickerStartEl = document.createElement('div')
