feat(dateinput): Arrow down from input

mst101 · Aug 18, 2021 · 0fa129a · 0fa129a
1 parent 50240be
commit 0fa129a
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 3 deletions.
diff --git a/src/components/DateInput.vue b/src/components/DateInput.vue
@@ -44,6 +44,7 @@
       @blur="handleInputBlur"
       @click="handleInputClick"
       @focus="handleInputFocus"
+      @keydown.down.prevent="handleKeydownDown"
       @keydown.enter.prevent="handleKeydownEnter"
       @keydown.escape.prevent="$emit('close')"
       @keydown.space="handleKeydownSpace($event)"
@@ -234,6 +235,20 @@ export default {
 
       this.$emit('focus')
     },
+    /**
+     * Opens the calendar, or sets the focus to the next focusable element down
+     */
+    handleKeydownDown() {
+      if (!this.isOpen) {
+        this.$emit('open')
+      }
+
+      if (!this.typeable) {
+        return
+      }
+
+      this.$emit('set-focus', ['prev', 'up', 'next', 'tabbableCell'])
+    },
     /**
      * Formats a typed date and closes the calendar
      */

diff --git a/test/unit/specs/DateInput/typedDates.spec.js b/test/unit/specs/DateInput/typedDates.spec.js
@@ -260,11 +260,36 @@ describe('Datepicker mounted to document body', () => {
     wrapper.destroy()
   })
 
+  it('arrows down from the input field to the previous button when the calendar is open', async () => {
+    const input = wrapper.find('input')
+
+    await input.trigger('click')
+    await input.trigger('keydown.down')
+
+    const prevButton = wrapper.find('button.prev')
+
+    expect(document.activeElement).toBe(prevButton.element)
+  })
+
+  it('arrows down from the input field to the `tabbable-cell` when `show-header` is false', async () => {
+    await wrapper.setProps({
+      showHeader: false,
+    })
+
+    const input = wrapper.find('input')
+
+    await input.trigger('click')
+    await input.trigger('keydown.down')
+
+    const tabbableCell = wrapper.find('button.cell[data-test-tabbable-cell]')
+
+    expect(document.activeElement).toBe(tabbableCell.element)
+  })
+
   it('arrows up from the previous button to the input field', async () => {
     const input = wrapper.find('input')
 
     await input.trigger('click')
-    await wrapper.vm.$nextTick()
 
     const prevButton = wrapper.find('button.prev')
     await prevButton.trigger('keydown.up')
@@ -276,7 +301,6 @@ describe('Datepicker mounted to document body', () => {
     const input = wrapper.find('input')
 
     await input.trigger('click')
-    await wrapper.vm.$nextTick()
 
     const nextButton = wrapper.find('button.next')
     await nextButton.trigger('keydown.up')
@@ -288,7 +312,6 @@ describe('Datepicker mounted to document body', () => {
     const input = wrapper.find('input')
 
     await input.trigger('click')
-    await wrapper.vm.$nextTick()
 
     const upButton = wrapper.find('button.vdp-datepicker__up')
     await upButton.trigger('keydown.up')

diff --git a/test/unit/specs/Datepicker/Datepicker.spec.js b/test/unit/specs/Datepicker/Datepicker.spec.js
@@ -316,6 +316,37 @@ describe('Datepicker mounted to body', () => {
   })
 })
 
+describe('Datepicker mounted to body with openDate', () => {
+  let wrapper
+
+  beforeEach(() => {
+    jest.useFakeTimers()
+
+    wrapper = mount(Datepicker, {
+      attachTo: document.body,
+      propsData: {
+        openDate: new Date(2020, 0, 1),
+      },
+    })
+  })
+
+  afterEach(() => {
+    jest.clearAllTimers()
+    wrapper.destroy()
+  })
+
+  it('opens the calendar on pressing the `down` arrow when the input is focused', async () => {
+    const input = wrapper.find('input')
+
+    await input.trigger('focus')
+    await input.trigger('keydown.down')
+    jest.advanceTimersByTime(250)
+
+    const openDateCell = wrapper.find('button.open')
+    expect(document.activeElement).toBe(openDateCell.element)
+  })
+})
+
 describe('Datepicker shallowMounted', () => {
   let wrapper
   let date