feat(datepicker): Set correct transition on typed date

Author: mst101

src/components/Datepicker.vue

@@ -252,7 +252,6 @@ export default {
        */
       selectedDate: null,
       slideDuration: 250,
-      transitionName: '',
       utils,
       view: '',
     }
@@ -476,7 +475,12 @@ export default {
      * @param {Date} date
      */
     handleTypedDate(date) {
+      if (this.selectedDate) {
+        this.setTransitionAndFocusDelay(this.selectedDate, date)
+      }
+
       this.selectDate(date ? date.valueOf() : null)
+      this.reviewFocus()
     },
     /**
      * Focus the relevant element when the view changes
@@ -619,19 +623,6 @@ export default {
       }
       this.pageTimestamp = this.utils.setDate(new Date(dateTemp), 1)
     },
-    /**
-     * Sets the direction of the slide transition
-     * @param {Number} plusOrMinus Positive for the future; negative for the past
-     */
-    setTransitionName(plusOrMinus) {
-      const isInTheFuture = plusOrMinus > 0
-
-      if (this.isRtl) {
-        this.transitionName = isInTheFuture ? 'slide-left' : 'slide-right'
-      } else {
-        this.transitionName = isInTheFuture ? 'slide-right' : 'slide-left'
-      }
-    },
     /**
      * Sets the slide duration in milliseconds by looking up the stylesheet
      */

src/mixins/navMixin.vue

@@ -12,6 +12,7 @@ export default {
       navElementsFocusedIndex: 0,
       resetTabbableCell: false,
       tabbableCell: null,
+      transitionName: '',
     }
   },
   computed: {
@@ -312,6 +313,19 @@ export default {
         pickerCells.querySelector('button.today:not(.muted):enabled') ||
         pickerCells.querySelector('button.cell:not(.muted):enabled')
     },
+    /**
+     * Sets the direction of the slide transition
+     * @param {Number} plusOrMinus Positive for the future; negative for the past
+     */
+    setTransitionName(plusOrMinus) {
+      const isInTheFuture = plusOrMinus > 0
+
+      if (this.isRtl) {
+        this.transitionName = isInTheFuture ? 'slide-left' : 'slide-right'
+      } else {
+        this.transitionName = isInTheFuture ? 'slide-right' : 'slide-left'
+      }
+    },
     /**
      * Tab backwards through the focus-trapped elements
      */