feat(datepicker): Set isActive when calendar is focused

mst101 · Jan 17, 2022 · 540cb34 · 540cb34
1 parent 515b4fc
commit 540cb34
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git a/src/components/Datepicker.vue b/src/components/Datepicker.vue
@@ -4,7 +4,8 @@
     ref="datepicker"
     class="vdp-datepicker"
     :class="[wrapperClass, { rtl: isRtl }]"
-    @focusin="handleFocusChange($event)"
+    @focusin="handleFocusIn($event)"
+    @focusout="handleFocusOut($event)"
     @keydown.esc="clearDate"
     @keydown.tab="tabThroughNavigation($event)"
   >

diff --git a/src/mixins/navMixin.vue b/src/mixins/navMixin.vue
@@ -7,6 +7,7 @@ export default {
         delay: 0,
         refs: [],
       },
+      isActive: false,
       isRevertingToOpenDate: false,
       navElements: [],
       navElementsFocusedIndex: 0,
@@ -176,15 +177,19 @@ export default {
     /**
      * Sets `datepickerId` (as a global) and keeps track of focusable elements
      */
-    handleFocusChange() {
+    handleFocusIn() {
       document.datepickerId = this.datepickerId
 
+      this.isActive = true
+
       this.setAllElements()
       this.setNavElements()
-
-      if (this.inline) {
-        this.setTabbableCell()
-      }
+    },
+    /**
+     * Sets the datepicker's `isActive` state to false
+     */
+    handleFocusOut() {
+      this.isActive = false
     },
     /**
      * Returns true if the user has arrowed to a new page