feat(datepicker): Select a typed date on losing focus

Author: mst101

src/components/Datepicker.vue

@@ -353,11 +353,15 @@ export default {
         this.setInitialView()
       }
     },
-    isActive(hasJustBecomeActive) {
+    isActive(hasJustBecomeActive, isNoLongerActive) {
       if (hasJustBecomeActive && this.inline) {
         this.setNavElementsFocusedIndex()
         this.tabToCorrectInlineCell()
       }
+
+      if (isNoLongerActive && this.typeable) {
+        this.setTypedDateOnLosingFocus()
+      }
     },
     latestValidTypedDate(date) {
       this.setPageDate(date)
@@ -721,8 +725,30 @@ export default {
       this.slideDuration = parseFloat(durationInSecs) * 1000
     },
     /**
-     * Set the datepicker value (and, if typeable, update `latestValidTypedDate`)
-     * @param {Date|String|Number|null} date
+     * Selects the typed date when the datepicker loses focus, provided it's valid and differs from the current selected date
+     */
+    setTypedDateOnLosingFocus() {
+      const parsedDate = this.$refs.dateInput.parseInput()
+      const date = this.utils.isValidDate(parsedDate) ? parsedDate : null
+      const hasChanged = () => {
+        if (!this.selectedDate && !date) {
+          return false
+        }
+
+        if (this.selectedDate && date) {
+          return date.valueOf() !== this.selectedDate.valueOf()
+        }
+
+        return true
+      }
+
+      if (hasChanged()) {
+        this.setValue(date)
+        this.$emit('selected', date)
+      }
+    },
+    /**
+     * Set the datepicker value (and, if typeable, update `latestValidTypedDate`)     * @param {Date|String|Number|null} date
      */
     setValue(date) {
       this.selectedDate = date || null

test/unit/specs/DateInput/typedDates.spec.js

@@ -321,6 +321,8 @@ describe('Datepicker mounted to document body', () => {
   let wrapper
 
   beforeEach(() => {
+    jest.useFakeTimers()
+
     wrapper = mount(Datepicker, {
       attachTo: document.body,
       propsData: {
@@ -330,6 +332,8 @@ describe('Datepicker mounted to document body', () => {
   })
 
   afterEach(() => {
+    jest.clearAllTimers()
+
     wrapper.destroy()
   })
 
@@ -391,4 +395,47 @@ describe('Datepicker mounted to document body', () => {
 
     expect(document.activeElement).toBe(input.element)
   })
+
+  it("selects the typed date when the calendar loses focus, provided it's valid and differs from the current selected date", async () => {
+    const input = wrapper.find('input')
+
+    // Invalid date
+    await input.trigger('click')
+    jest.advanceTimersByTime(250)
+
+    await input.setValue('invalid date')
+    await input.trigger('keyup')
+
+    await document.activeElement.blur()
+    jest.advanceTimersByTime(250)
+
+    expect(input.element.value).toEqual('')
+    expect(wrapper.emitted('selected')).toBeFalsy()
+
+    // Valid date
+    await input.trigger('click')
+    jest.advanceTimersByTime(250)
+
+    await input.setValue('2 jan 22')
+    await input.trigger('keyup')
+
+    await document.activeElement.blur()
+    jest.advanceTimersByTime(250)
+
+    expect(input.element.value).toEqual('02 Jan 2022')
+    expect(wrapper.emitted('selected')).toBeTruthy()
+
+    // Unchanged date
+    await input.trigger('click')
+    jest.advanceTimersByTime(250)
+
+    await input.setValue('2 jan 22')
+    await input.trigger('keyup')
+
+    await document.activeElement.blur()
+    jest.advanceTimersByTime(250)
+
+    expect(input.element.value).toEqual('02 Jan 2022')
+    expect(wrapper.emitted('selected')).toHaveLength(1)
+  })
 })