feat(datepicker): Don't select date on typed-date event

Author: mst101

src/components/DateInput.vue

@@ -119,10 +119,7 @@ export default {
       return this.inputClass
     },
     formattedValue() {
-      if (!this.selectedDate) {
-        return null
-      }
-      if (this.typedDate.length) {
+      if (this.typeable) {
         return this.typedDate
       }
 

src/components/Datepicker.vue

@@ -493,16 +493,29 @@ export default {
       }
     },
     /**
-     * Set the date from a 'typed-date' event
-     * @param {Date} date
+     * Updates the page (if necessary) after a 'typed-date' event and sets `tabbableCell` & `latestValidTypedDate`
+     * @param {Date=} date
      */
     handleTypedDate(date) {
-      if (this.selectedDate) {
-        this.setTransitionAndFocusDelay(this.selectedDate, date)
+      if (!date) {
+        return
       }
 
-      this.selectDate(date ? date.valueOf() : null)
-      this.reviewFocus()
+      const originalPageDateValue = new Date(this.pageDate)
+
+      this.setTransitionAndFocusDelay(this.latestValidTypedDate, date)
+      this.latestValidTypedDate = date
+      this.setPageDate(date)
+
+      if (this.isPageChange(originalPageDateValue)) {
+        this.handlePageChange({
+          focusRefs: [],
+          pageDate: this.pageDate,
+        })
+        return
+      }
+
+      this.setTabbableCell()
     },
     /**
      * Focus the relevant element when the view changes
@@ -533,6 +546,18 @@ export default {
     hasClass(element, className) {
       return element && element.className.split(' ').includes(className)
     },
+    /**
+     * Used for typeable datepicker: returns true if a typed date causes the page to change
+     * @param   {Date}    originalPageDate
+     * @returns {Boolean}
+     */
+    isPageChange(originalPageDate) {
+      if (!this.isOpen) {
+        return false
+      }
+
+      return originalPageDate.valueOf() !== this.pageDate.valueOf()
+    },
     /**
      * Initiate the component
      */

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

@@ -167,6 +167,30 @@ describe('Datepicker mount', () => {
     expect(wrapper.vm.selectedDate).toEqual(today)
   })
 
+  it('emits `selected` when a valid date is typed and the `enter` key is pressed', async () => {
+    const input = wrapper.find('input')
+
+    input.setValue('Jan')
+    await input.trigger('keyup')
+
+    expect(wrapper.emitted('selected')).toBeUndefined()
+
+    await input.trigger('keydown.enter')
+
+    expect(wrapper.emitted('selected')).toBeDefined()
+    expect(wrapper.emitted('selected')[0][0]).toBeInstanceOf(Date)
+  })
+
+  it('does not emit `selected` when an invalid date is typed and the `enter` key is pressed', async () => {
+    const input = wrapper.find('input')
+
+    input.setValue('invalid date')
+    await input.trigger('keyup')
+    await input.trigger('keydown.enter')
+
+    expect(wrapper.emitted('selected')).toBeUndefined()
+  })
+
   it('shows the correct month as you type', async () => {
     const input = wrapper.find('input')