feat(datepicker): Revert to open date/close on escape

Author: mst101

src/components/DateInput.vue

@@ -46,7 +46,7 @@
       @focus="handleInputFocus"
       @keydown.down.prevent="handleKeydownDown"
       @keydown.enter.prevent="handleKeydownEnter"
-      @keydown.escape.prevent="$emit('close')"
+      @keydown.esc.prevent="clearDate"
       @keydown.space="handleKeydownSpace($event)"
       @keyup="handleKeyup"
       @keyup.space="handleKeyupSpace($event)"
@@ -170,6 +170,7 @@ export default {
      * Emits a `clear-date` event
      */
     clearDate() {
+      this.input.value = ''
       this.$emit('clear-date')
     },
     /**

src/components/Datepicker.vue

@@ -5,6 +5,7 @@
     class="vdp-datepicker"
     :class="[wrapperClass, { rtl: isRtl }]"
     @focusin="handleFocusChange($event)"
+    @keydown.esc="clearDate"
     @keydown.tab="tabThroughNavigation($event)"
   >
     <DateInput
@@ -380,8 +381,15 @@ export default {
      * Clear the selected date
      */
     clearDate() {
+      if (this.isResetFocus()) {
+        this.resetFocusToOpenDate()
+        return
+      }
+
       this.selectedDate = null
-      this.setPageDate()
+      this.focus.refs = ['input']
+      this.close()
+
       this.$emit('selected', null)
       this.$emit('input', null)
       this.$emit('cleared')
@@ -529,6 +537,17 @@ export default {
         date,
       )
     },
+    /**
+     * Returns true if we should reset the focus to the open date
+     * @returns {Boolean}
+     */
+    isResetFocus() {
+      return (
+        this.isOpen &&
+        this.hasClass(document.activeElement, 'cell') &&
+        (!this.isMinimumView || !this.hasClass(document.activeElement, 'open'))
+      )
+    },
     /**
      * Opens the calendar with the relevant view: 'day', 'month', or 'year'
      */

src/components/PickerCells.vue

@@ -3,6 +3,7 @@
     <button
       v-for="(cell, id) in cells"
       :key="cell.timestamp"
+      :ref="cell.isOpenDate ? 'openDate' : null"
       :class="cellClasses(cell)"
       :data-id="id"
       :data-test-tabbable-cell="id === tabbableCellId"

src/mixins/navMixin.vue

@@ -7,6 +7,7 @@ export default {
         delay: 0,
         refs: [],
       },
+      isRevertingToOpenDate: false,
       navElements: [],
       navElementsFocusedIndex: 0,
       resetTabbableCell: false,
@@ -77,6 +78,9 @@ export default {
       if (ref === 'calendarButton') {
         return this.$refs.dateInput.$refs.calendarButton
       }
+      if (ref === 'openDate') {
+        return this.$refs.picker.$refs.cells.$refs.openDate[0]
+      }
       if (this.showHeader) {
         if (ref === 'up') {
           return this.$refs.picker && this.$refs.picker.$refs.up.$el
@@ -168,6 +172,22 @@ export default {
     hasArrowedToNewPage() {
       return this.focus.refs && this.focus.refs[0] === 'arrow-to-cell'
     },
+    /**
+     * Resets the focus to the open date
+     */
+    resetFocusToOpenDate() {
+      this.focus.refs = ['openDate']
+
+      if (!this.isMinimumView) {
+        this.isRevertingToOpenDate = true
+        this.view = this.minimumView
+      }
+
+      this.setTabbableCell()
+      this.reviewFocus()
+      this.selectedDate = null
+      this.setPageDate()
+    },
     /**
      * Sets the correct focus on next tick
      */
@@ -189,6 +209,24 @@ export default {
         this.resetTabbableCell = false
       })
     },
+    /**
+     * Sets the direction of the slide transition and whether or not to delay application of the focus
+     * @param {Date|Number} startDate     The date from which to measure
+     * @param {Date|Number} endDate       Is this before or after the startDate? And is it on the same page?
+     */
+    setTransitionAndFocusDelay(startDate, endDate) {
+      const startPageDate = this.utils.setDate(new Date(startDate), 1)
+      const endPageDate = this.utils.setDate(new Date(endDate), 1)
+      const isInTheFuture = startPageDate < endPageDate
+
+      if (this.isMinimumView) {
+        this.focus.delay = isInTheFuture ? this.slideDuration : 0
+      } else {
+        this.focus.delay = 0
+      }
+
+      this.setTransitionName(endDate - startDate)
+    },
     /**
      * Records all focusable elements (so that we know whether any element in the datepicker is focused)
      */

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

@@ -160,11 +160,11 @@ describe('DateInput', () => {
     expect(wrapper.find('input').element.value).toEqual('!')
   })
 
-  it('emits close when escape is pressed', async () => {
+  it('emits `clear-date` when escape is pressed', async () => {
     const input = wrapper.find('input')
-    await input.trigger('keydown.escape')
+    await input.trigger('keydown.esc')
 
-    expect(wrapper.emitted('close')).toBeTruthy()
+    expect(wrapper.emitted('clear-date')).toBeTruthy()
   })
 
   it('opens the calendar on click', async () => {

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

@@ -235,6 +235,28 @@ describe('Datepicker mount', () => {
     expect(wrapper.vm.selectedDate).toEqual(new Date(2016, 1, 15))
   })
 
+  it('clears the date when escape is pressed', async () => {
+    await wrapper.setProps({
+      value: new Date(2020, 0, 1),
+    })
+
+    const input = wrapper.find('input')
+    expect(wrapper.vm.selectedDate).toStrictEqual(new Date(2020, 0, 1))
+
+    await input.trigger('keydown.esc')
+    expect(wrapper.vm.selectedDate).toBeNull()
+  })
+
+  it('closes the calendar when escape is pressed', async () => {
+    const input = wrapper.find('input')
+
+    await input.trigger('click')
+    expect(wrapper.vm.isOpen).toBeTruthy()
+
+    await input.trigger('keydown.esc')
+    expect(wrapper.vm.isOpen).toBeFalsy()
+  })
+
   it('opens the calendar when the space bar is pressed on the input field', async () => {
     const input = wrapper.find('input')
     await input.trigger('keydown.space')

test/unit/specs/Datepicker/Datepicker.spec.js

@@ -729,6 +729,137 @@ describe('Datepicker mounted to body with openDate', () => {
     jest.advanceTimersByTime(250)
     expect(document.activeElement).toBe(cellDown.element)
   })
+
+  it('reverts focus to the `open-date` when another date on the same page has focus and the `escape` key is pressed', async () => {
+    const input = wrapper.find('input')
+    await input.trigger('click')
+
+    jest.advanceTimersByTime(250)
+
+    const openDateCell = wrapper.find('button.open')
+    expect(document.activeElement).toBe(openDateCell.element)
+
+    await openDateCell.trigger('keydown.down')
+
+    const downCell = wrapper.findAll('button.cell').at(10)
+    await downCell.trigger('keydown.esc')
+
+    jest.advanceTimersByTime(250)
+
+    expect(document.activeElement).toBe(openDateCell.element)
+  })
+
+  it('reverts focus to the `open-date` when a date on a different page has focus and the `escape` key is pressed', async () => {
+    const input = wrapper.find('input')
+    await input.trigger('click')
+
+    jest.advanceTimersByTime(250)
+
+    let openDateCell = wrapper.find('button.open')
+    expect(document.activeElement).toStrictEqual(openDateCell.element)
+
+    await openDateCell.trigger('keydown.up')
+    jest.advanceTimersByTime(250)
+
+    const upCell = wrapper.findAll('button.cell').at(24)
+    expect(document.activeElement).toBe(upCell.element)
+
+    await upCell.trigger('keydown.esc')
+
+    jest.advanceTimersByTime(250)
+    openDateCell = wrapper.find('button.open')
+    expect(document.activeElement).toBe(openDateCell.element)
+  })
+
+  it('reverts focus to the `open-date` when a month has focus and the `escape` key is pressed', async () => {
+    const input = wrapper.find('input')
+    await input.trigger('click')
+    jest.advanceTimersByTime(250)
+    expect(wrapper.vm.view).toBe('day')
+
+    let upButton = wrapper.find('button.vdp-datepicker__up')
+    await upButton.trigger('click')
+    jest.advanceTimersByTime(250)
+    expect(wrapper.vm.view).toBe('month')
+
+    upButton = wrapper.find('button.vdp-datepicker__up')
+    await upButton.trigger('keydown.down')
+
+    const firstCell = wrapper.find('button.cell:not(.muted)')
+    await firstCell.trigger('keydown.esc')
+    jest.advanceTimersByTime(250)
+    expect(wrapper.vm.view).toBe('day')
+
+    const openDateCell = wrapper.find('button.open')
+    expect(document.activeElement).toBe(openDateCell.element)
+  })
+
+  it('reverts focus to the `open-date` when a year has focus and the `escape` key is pressed', async () => {
+    const input = wrapper.find('input')
+    await input.trigger('click')
+    jest.advanceTimersByTime(250)
+    expect(wrapper.vm.view).toBe('day')
+
+    let upButton = wrapper.find('button.vdp-datepicker__up')
+    await upButton.trigger('click')
+    jest.advanceTimersByTime(250)
+    expect(wrapper.vm.view).toBe('month')
+
+    upButton = wrapper.find('button.vdp-datepicker__up')
+    await upButton.trigger('click')
+    jest.advanceTimersByTime(250)
+    expect(wrapper.vm.view).toBe('year')
+
+    const firstCell = wrapper.find('button.cell:not(.muted)')
+    upButton = wrapper.find('button.vdp-datepicker__up')
+    await upButton.trigger('keydown.down')
+
+    await firstCell.element.focus()
+    await firstCell.trigger('keydown.esc')
+    jest.advanceTimersByTime(250)
+    expect(wrapper.vm.view).toBe('day')
+
+    const openDateCell = wrapper.find('button.open')
+    expect(document.activeElement).toBe(openDateCell.element)
+  })
+
+  it('clears the date and closes the calendar on pressing the `escape` key, if the `open-date` is focused', async () => {
+    const input = wrapper.find('input')
+    await input.trigger('click')
+    jest.advanceTimersByTime(250)
+
+    expect(wrapper.vm.isOpen).toBeTruthy()
+    const openDateCell = wrapper.find('button.open')
+    await openDateCell.trigger('focus')
+    expect(document.activeElement).toStrictEqual(openDateCell.element)
+
+    await openDateCell.trigger('keydown.esc')
+    expect(wrapper.vm.isOpen).toBeFalsy()
+    expect(wrapper.vm.selectedDate).toEqual(null)
+  })
+
+  it('clears the date and reverts the calendar to `minimumView` on pressing the `escape` key', async () => {
+    const input = wrapper.find('input')
+
+    await input.trigger('click')
+    expect(wrapper.vm.isOpen).toBeTruthy()
+
+    const upButton = wrapper.find('button.vdp-datepicker__up')
+    await upButton.trigger('click')
+    expect(wrapper.vm.view).toBe('month')
+
+    const firstCell = wrapper.find('button.cell')
+    await firstCell.element.focus()
+    expect(document.activeElement).toBe(firstCell.element)
+
+    await firstCell.trigger('keydown.esc')
+    jest.advanceTimersByTime(250)
+
+    const openDate = wrapper.find('button.open')
+    expect(wrapper.vm.view).toBe('day')
+    expect(wrapper.vm.selectedDate).toEqual(null)
+    expect(document.activeElement).toBe(openDate.element)
+  })
 })
 
 describe('Datepicker shallowMounted', () => {