fix(datepicker): Resolve bug for when `append-to-body = true

Author: mst101

src/components/Datepicker.vue

@@ -67,6 +67,10 @@
           :class="pickerClasses"
           data-test-calendar
           @mousedown.prevent
+          @focusin.stop="handleFocusIn($event)"
+          @focusout.stop="handleFocusOut($event)"
+          @keydown.esc.stop="clearDate"
+          @keydown.tab.stop="tabThroughNavigation($event)"
         >
           <Transition name="view">
             <div ref="view" :key="view">

src/mixins/navMixin.vue

@@ -363,6 +363,12 @@ export default {
      */
     setAllElements() {
       this.allElements = this.getFocusableElements(this.$refs.datepicker)
+
+      if (this.appendToBody) {
+        this.allElements = this.allElements.concat(
+          this.getFocusableElements(this.$refs.popup.$el),
+        )
+      }
     },
     /**
      * Set the focus

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

@@ -225,6 +225,20 @@ describe('Datepicker mounted to body', () => {
     expect(document.activeElement).toStrictEqual(todayCell.element)
   })
 
+  it("focuses today's date when append-to-body is true", async () => {
+    await wrapper.setProps({
+      appendToBody: true,
+    })
+
+    const input = wrapper.find('input')
+    await input.trigger('click')
+    jest.advanceTimersByTime(250)
+    const todayCell = wrapper.find('button.today')
+
+    expect(todayCell.text()).toBe(new Date().getDate().toString())
+    expect(document.activeElement).toStrictEqual(todayCell.element)
+  })
+
   it('focuses the up button on increasing the view', async () => {
     const input = wrapper.find('input')
     await input.trigger('click')