feat(datepicker): Focus prev/next buttons on click

mst101 · mst101 · commit 4931fa2ade48 · 2021-08-18T13:55:00.000+02:00
diff --git a/src/components/Datepicker.vue b/src/components/Datepicker.vue
@@ -381,10 +381,12 @@ export default {
       this.$emit('focus')
     },
     /**
-     * Set the new pageDate and emit `changed-<view>` event
+     * Set the new pageDate, focus the relevant element and emit a `changed-<view>` event
      */
-    handlePageChange(pageDate) {
+    handlePageChange({ focusRefs, pageDate }) {
       this.setPageDate(pageDate)
+      this.focus.refs = focusRefs
+      this.reviewFocus()
       this.$emit(`changed-${this.nextView.up}`, pageDate)
     },
     /**
diff --git a/src/components/PickerDay.vue b/src/components/PickerDay.vue
@@ -4,6 +4,7 @@
 
     <PickerHeader
       v-if="showHeader"
+      ref="pickerHeader"
       :bootstrap-styling="bootstrapStyling"
       :is-next-disabled="isNextDisabled"
       :is-previous-disabled="isPreviousDisabled"
diff --git a/src/components/PickerHeader.vue b/src/components/PickerHeader.vue
@@ -1,25 +1,27 @@
 <template>
   <header>
     <button
+      ref="prev"
       class="prev"
       :class="{ btn: bootstrapStyling, rtl: isRtl }"
       data-test-previous-button
       :disabled="isPreviousDisabled"
       type="button"
-      @click="isPreviousDisabled ? null : $emit('page-change', -1)"
+      @click="$emit('page-change', previousPage)"
     >
       <slot name="prevIntervalBtn">
         <span class="default">&lt;</span>
       </slot>
     </button>
     <slot />
     <button
+      ref="next"
       class="next"
       :class="{ btn: bootstrapStyling, rtl: isRtl }"
       data-test-next-button
       :disabled="isNextDisabled"
       type="button"
-      @click="isNextDisabled ? null : $emit('page-change', 1)"
+      @click="$emit('page-change', nextPage)"
     >
       <slot name="nextIntervalBtn">
         <span class="default">&gt;</span>
@@ -49,5 +51,11 @@ export default {
       required: true,
     },
   },
+  data() {
+    return {
+      previousPage: { incrementBy: -1, focusRefs: ['prev'] },
+      nextPage: { incrementBy: 1, focusRefs: ['next'] },
+    }
+  },
 }
 </script>
diff --git a/src/components/PickerMonth.vue b/src/components/PickerMonth.vue
@@ -4,6 +4,7 @@
 
     <PickerHeader
       v-if="showHeader"
+      ref="pickerHeader"
       :bootstrap-styling="bootstrapStyling"
       :is-next-disabled="isNextDisabled"
       :is-previous-disabled="isPreviousDisabled"
diff --git a/src/components/PickerYear.vue b/src/components/PickerYear.vue
@@ -4,6 +4,7 @@
 
     <PickerHeader
       v-if="showHeader"
+      ref="pickerHeader"
       :bootstrap-styling="bootstrapStyling"
       :is-next-disabled="isNextDisabled"
       :is-previous-disabled="isPreviousDisabled"
diff --git a/src/mixins/navMixin.vue b/src/mixins/navMixin.vue
@@ -46,13 +46,24 @@ export default {
      * @param {string} ref        The `ref` name of the wanted element
      * @returns {HTMLElement|Vue} A Vue element
      */
+    // eslint-disable-next-line complexity
     getElementByRef(ref) {
       if (ref === 'tabbableCell') {
         return this.tabbableCell
       }
       if (ref === 'input') {
         return this.$refs.dateInput && this.$refs.dateInput.$refs[this.refName]
       }
+      if (this.showHeader) {
+        if (ref === 'up') {
+          return this.$refs.picker && this.$refs.picker.$refs.up.$el
+        }
+        return (
+          this.$refs.picker &&
+          this.$refs.picker.$refs.pickerHeader &&
+          this.$refs.picker.$refs.pickerHeader.$refs[ref]
+        )
+      }
       return null
     },
     /**
diff --git a/src/mixins/pickerMixin.vue b/src/mixins/pickerMixin.vue
@@ -94,8 +94,9 @@ export default {
     /**
      * Changes the page up or down
      * @param {Number} incrementBy
+     * @param {[String]} focusRefs
      */
-    changePage(incrementBy) {
+    changePage({ incrementBy, focusRefs }) {
       const { pageDate, utils } = this
       const units =
         this.view === 'year' ? incrementBy * this.yearRange : incrementBy
@@ -108,7 +109,7 @@ export default {
         utils.setFullYear(pageDate, utils.getFullYear(pageDate) + units)
       }
 
-      this.$emit('page-change', pageDate)
+      this.$emit('page-change', { focusRefs, pageDate })
     },
     /**
      * Determines which transition to use (for edge dates) and emits a 'select' event
diff --git a/test/unit/specs/Datepicker/Datepicker.spec.js b/test/unit/specs/Datepicker/Datepicker.spec.js
@@ -365,16 +365,16 @@ describe('Datepicker shallowMounted', () => {
   it('emits changed-month/year/decade', async () => {
     const pageDate = new Date(2016, 2, 1)
     await wrapper.vm.setView('day')
-    await wrapper.vm.handlePageChange(pageDate)
+    await wrapper.vm.handlePageChange({ pageDate })
 
     expect(wrapper.emitted('changed-month')).toBeTruthy()
 
     await wrapper.vm.setView('month')
-    await wrapper.vm.handlePageChange(pageDate)
+    await wrapper.vm.handlePageChange({ pageDate })
     expect(wrapper.emitted('changed-year')).toBeTruthy()
 
     await wrapper.vm.setView('year')
-    await wrapper.vm.handlePageChange(pageDate)
+    await wrapper.vm.handlePageChange({ pageDate })
     expect(wrapper.emitted('changed-decade')).toBeTruthy()
   })
 
diff --git a/test/unit/specs/PickerDay/pickerDay.spec.js b/test/unit/specs/PickerDay/pickerDay.spec.js
@@ -29,13 +29,13 @@ describe('PickerDay', () => {
   })
 
   it('can set the next month', () => {
-    wrapper.vm.changePage(1)
-    expect(wrapper.emitted('page-change')[0][0].getMonth()).toEqual(2)
+    wrapper.vm.changePage({ incrementBy: 1, focusRefs: ['next'] })
+    expect(wrapper.emitted('page-change')[0][0].pageDate.getMonth()).toEqual(2)
   })
 
   it('can set the previous month', () => {
-    wrapper.vm.changePage(-1)
-    expect(wrapper.emitted('page-change')[0][0].getMonth()).toEqual(0)
+    wrapper.vm.changePage({ incrementBy: -1, focusRefs: ['prev'] })
+    expect(wrapper.emitted('page-change')[0][0].pageDate.getMonth()).toEqual(0)
   })
 
   it('emits an event when selected', () => {
diff --git a/test/unit/specs/PickerMonth/pickerMonth.spec.js b/test/unit/specs/PickerMonth/pickerMonth.spec.js
@@ -38,14 +38,18 @@ describe('PickerMonth', () => {
     expect(wrapper.vm.isSelectedMonth(new Date(2017, 1, 1))).toEqual(false)
   })
 
-  it('can set the next year', async () => {
-    wrapper.vm.changePage(1)
-    expect(wrapper.emitted('page-change')[0][0].getFullYear()).toEqual(2019)
+  it('can set the next year', () => {
+    wrapper.vm.changePage({ incrementBy: 1, focusRefs: ['next'] })
+    expect(wrapper.emitted('page-change')[0][0].pageDate.getFullYear()).toEqual(
+      2019,
+    )
   })
 
-  it('can set the previous year', async () => {
-    wrapper.vm.changePage(-1)
-    expect(wrapper.emitted('page-change')[0][0].getFullYear()).toEqual(2017)
+  it('can set the previous year', () => {
+    wrapper.vm.changePage({ incrementBy: -1, focusRefs: ['prev'] })
+    expect(wrapper.emitted('page-change')[0][0].pageDate.getFullYear()).toEqual(
+      2017,
+    )
   })
 
   it('emits date on selection', () => {
diff --git a/test/unit/specs/PickerYear/disabledYears.spec.js b/test/unit/specs/PickerYear/disabledYears.spec.js
@@ -25,10 +25,10 @@ describe('PickerYear', () => {
   })
 
   it("can't navigate to a disabled year", () => {
-    wrapper.vm.changePage(-1)
+    wrapper.vm.changePage({ incrementBy: -1, focusRefs: ['prev'] })
     expect(wrapper.emitted('changed-decade')).toBeFalsy()
 
-    wrapper.vm.changePage(1)
+    wrapper.vm.changePage({ incrementBy: 1, focusRefs: ['next'] })
     expect(wrapper.emitted('changed-decade')).toBeFalsy()
   })
 
diff --git a/test/unit/specs/PickerYear/pickerYear.spec.js b/test/unit/specs/PickerYear/pickerYear.spec.js
@@ -43,13 +43,17 @@ describe('PickerYear', () => {
   })
 
   it('can set the next decade', () => {
-    wrapper.vm.changePage(1)
-    expect(wrapper.emitted('page-change')[0][0].getFullYear()).toEqual(2028)
+    wrapper.vm.changePage({ incrementBy: 1, focusRefs: ['next'] })
+    expect(wrapper.emitted('page-change')[0][0].pageDate.getFullYear()).toEqual(
+      2028,
+    )
   })
 
   it('can set the previous decade', () => {
-    wrapper.vm.changePage(-1)
-    expect(wrapper.emitted('page-change')[0][0].getFullYear()).toEqual(2008)
+    wrapper.vm.changePage({ incrementBy: -1, focusRefs: ['prev'] })
+    expect(wrapper.emitted('page-change')[0][0].pageDate.getFullYear()).toEqual(
+      2008,
+    )
   })
 
   it('formats the decade range', async () => {
diff --git a/test/unit/specs/pickerMixin.spec.js b/test/unit/specs/pickerMixin.spec.js
@@ -36,12 +36,4 @@ describe('pickerMixin', () => {
   it('mounts', () => {
     expect(wrapper.vm).toBeTruthy()
   })
-
-  it('uses `isNextDisabled` correctly', () => {
-    expect(wrapper.vm.isNextDisabled).toBeFalsy()
-  })
-
-  it('uses `isPreviousDisabled` correctly', () => {
-    expect(wrapper.vm.isPreviousDisabled).toBeFalsy()
-  })
 })
