feat(datepicker): Focus correct element on close

Author: mst101

src/components/DateInput.vue

@@ -4,12 +4,13 @@
     <!-- Calendar Button -->
     <button
       v-if="calendarButton"
+      ref="calendarButton"
       class="vdp-datepicker__calendar-button"
       :class="{ 'btn input-group-prepend': bootstrapStyling }"
       data-test-calendar-button
       :disabled="disabled"
       type="button"
-      @click="toggle"
+      @click="toggle('calendarButton')"
       @focus="handleButtonFocus"
     >
       <span :class="{ 'input-group-text': bootstrapStyling }">
@@ -271,7 +272,11 @@ export default {
     /**
      * Opens or closes the calendar
      */
-    toggle() {
+    toggle(calendarButton) {
+      if (this.isOpen) {
+        this.$emit('set-focus', [calendarButton || 'input'])
+      }
+
       this.$emit(this.isOpen ? 'close' : 'open')
     },
   },

src/components/Datepicker.vue

@@ -41,6 +41,7 @@
       @close="close"
       @focus="handleInputFocus"
       @open="open"
+      @set-focus="setFocus($event)"
       @typed-date="handleTypedDate"
     >
       <slot slot="beforeDateInput" name="beforeDateInput" />
@@ -392,6 +393,8 @@ export default {
       if (this.showCalendarOnFocus || !this.focus.refs.length) {
         this.$refs.dateInput.shouldToggleOnClick = true
         document.body.focus()
+      } else {
+        this.reviewFocus()
       }
 
       this.$emit('closed')

src/mixins/navMixin.vue

@@ -52,14 +52,17 @@ export default {
      * @param {string} ref        The `ref` name of the wanted element
      * @returns {HTMLElement|Vue} A Vue element
      */
-    // eslint-disable-next-line complexity
+    // eslint-disable-next-line complexity,max-statements
     getElementByRef(ref) {
       if (ref === 'tabbableCell') {
         return this.tabbableCell
       }
       if (ref === 'input') {
         return this.$refs.dateInput && this.$refs.dateInput.$refs[this.refName]
       }
+      if (ref === 'calendarButton') {
+        return this.$refs.dateInput.$refs.calendarButton
+      }
       if (this.showHeader) {
         if (ref === 'up') {
           return this.$refs.picker && this.$refs.picker.$refs.up.$el
@@ -163,6 +166,14 @@ export default {
     setAllElements() {
       this.allElements = this.getFocusableElements(this.$refs.datepicker)
     },
+    /**
+     * Set the focus
+     * @param {Array} refs An array of `refs` to focus (in order of preference)
+     */
+    setFocus(refs) {
+      this.focus.refs = refs
+      this.applyFocus()
+    },
     /**
      * Determines which elements in datepicker should be focus-trapped
      */

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

@@ -252,6 +252,27 @@ describe('Datepicker mounted to body', () => {
     expect(wrapper.vm.isOpen).toBeFalsy()
   })
 
+  it('focuses the calendar button when closed via the calendar button', async () => {
+    await wrapper.setProps({
+      calendarButton: true,
+    })
+
+    const calendarButton = wrapper.find('button[data-test-calendar-button]')
+    await calendarButton.trigger('click')
+    jest.advanceTimersByTime(250)
+
+    expect(wrapper.vm.isOpen).toBeTruthy()
+
+    const openDateCell = wrapper.find('button.open')
+    expect(document.activeElement).toStrictEqual(openDateCell.element)
+
+    await calendarButton.trigger('click')
+    jest.advanceTimersByTime(250)
+
+    expect(wrapper.vm.isOpen).toBeFalsy()
+    expect(document.activeElement).toBe(calendarButton.element)
+  })
+
   it('does not arrow up from the previous button to the input field', async () => {
     const input = wrapper.find('input')