feat(datepicker): Make focus & blur events refer to entire datepi…

…cker
mst101 · Jul 21, 2022 · 1ea96fe · 1ea96fe
1 parent 0e8712a
commit 1ea96fe
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 48 deletions.
diff --git a/docs/guide/Events/README.md b/docs/guide/Events/README.md
@@ -2,16 +2,16 @@
 
 These events are emitted on actions in the datepicker
 
-| Event                                           | Output      | Description                       |
-| ----------------------------------------------- | ----------- | --------------------------------- |
-| changed                                         | Date\|null | The selected date has been changed |
-| changed-month                                   | Object      | Month page has been changed       |
-| changed-year                                    | Object      | Year page has been changed        |
-| changed-decade                                  | Object      | Decade page has been changed      |
-| cleared                                         |             | Selected date has been cleared    |
-| closed                                          |             | The picker has been closed        |
-| input                                           | Date\|null | A date has been selected           |
-| opened                                          |             | The picker has been opened        |
-| selected <br/>_(deprecated in favour of input)_ | Date\|null | A date has been selected           |
-| blur                                            |             | Input blur event                  |
-| focus                                           |             | Input focus event                 |
+| Event                                           | Output      | Description                    |
+| ----------------------------------------------- | ----------- |--------------------------------|
+| changed                                         | Date\|null                           | The selected date has been changed |
+| changed-month                                   | Object      | Month page has been changed    |
+| changed-year                                    | Object      | Year page has been changed     |
+| changed-decade                                  | Object      | Decade page has been changed   |
+| cleared                                         |             | Selected date has been cleared |
+| closed                                          |             | The picker has been closed     |
+| input                                           | Date\|null                           | A date has been selected           |
+| opened                                          |             | The picker has been opened     |
+| selected <br/>_(deprecated in favour of input)_ | Date\|null                           | A date has been selected           |
+| blur                                            |             | Datepicker has lost focus      |
+| focus                                           |             | Datepicker has been focused    |
diff --git a/src/components/DateInput.vue b/src/components/DateInput.vue
@@ -192,7 +192,7 @@ export default {
       }
     },
     /**
-     * Validate typedDate and emit a `blur` event
+     * Validates typedDate
      */
     handleInputBlur() {
       if (this.showCalendarOnFocus && !this.isOpen) {
@@ -203,7 +203,6 @@ export default {
         this.formatTypedDate()
       }
       this.isInputFocused = false
-      this.$emit('blur')
     },
     /**
      * Resets `shouldToggleOnFocus` to true
@@ -232,7 +231,7 @@ export default {
       }
     },
     /**
-     * Emits a `focus` event and opens the calendar when `show-calendar-on-focus` is true
+     * Opens the calendar when `show-calendar-on-focus` is true
      */
     handleInputFocus() {
       this.isInputFocused = true
@@ -248,8 +247,6 @@ export default {
           this.shouldToggleOnClick = true
         }, 300)
       }
-
-      this.$emit('focus')
     },
     /**
      * Opens the calendar, or sets the focus to the next focusable element down

diff --git a/src/components/Datepicker.vue b/src/components/Datepicker.vue
@@ -38,10 +38,8 @@
       :translation="translation"
       :typeable="typeable"
       :use-utc="useUtc"
-      @blur="handleInputBlur"
       @clear-date="clearDate"
       @close="close"
-      @focus="handleInputFocus"
       @open="open"
       @select-typed-date="selectTypedDate"
       @set-focus="setFocus($event)"
@@ -367,18 +365,12 @@ export default {
       }
     },
     isActive(hasJustBecomeActive, isNoLongerActive) {
-      if (hasJustBecomeActive && this.inline) {
-        this.setNavElementsFocusedIndex()
-        this.tabToCorrectInlineCell()
+      if (hasJustBecomeActive) {
+        this.datepickerIsActive()
       }
 
-      if (isNoLongerActive && this.typeable) {
-        this.skipReviewFocus = true
-        this.selectTypedDateOnLosingFocus()
-
-        this.$nextTick(() => {
-          this.skipReviewFocus = false
-        })
+      if (isNoLongerActive) {
+        this.datepickerIsInactive()
       }
     },
     latestValidTypedDate(date) {
@@ -473,6 +465,26 @@ export default {
 
       return true
     },
+    datepickerIsActive() {
+      this.$emit('focus')
+
+      if (this.inline) {
+        this.setNavElementsFocusedIndex()
+        this.tabToCorrectInlineCell()
+      }
+    },
+    datepickerIsInactive() {
+      this.$emit('blur')
+
+      if (this.typeable) {
+        this.skipReviewFocus = true
+        this.selectTypedDateOnLosingFocus()
+
+        this.$nextTick(() => {
+          this.skipReviewFocus = false
+        })
+      }
+    },
     /**
      * Closes the calendar when no element within it has focus
      */
@@ -492,18 +504,6 @@ export default {
         })
       }
     },
-    /**
-     * Emits a 'blur' event
-     */
-    handleInputBlur() {
-      this.$emit('blur')
-    },
-    /**
-     * Emits a 'focus' event
-     */
-    handleInputFocus() {
-      this.$emit('focus')
-    },
     /**
      * Set the new pageDate, focus the relevant element and emit a `changed-<view>` event
      */

diff --git a/test/unit/specs/Datepicker/Datepicker.spec.js b/test/unit/specs/Datepicker/Datepicker.spec.js
@@ -342,16 +342,19 @@ describe('Datepicker mounted', () => {
     expect(wrapper.vm.isOpen).toBeFalsy()
   })
 
-  it('emits blur', async () => {
+  it('emits focus', async () => {
     const input = wrapper.find('input')
-    await input.trigger('blur')
-    expect(wrapper.emitted('blur')).toBeTruthy()
+    await input.trigger('focusin')
+
+    expect(wrapper.emitted('focus')).toBeTruthy()
   })
 
-  it('emits focus', async () => {
+  it('emits blur', async () => {
     const input = wrapper.find('input')
-    await input.trigger('focus')
-    expect(wrapper.emitted('focus')).toBeTruthy()
+    await input.trigger('focusin')
+    await input.trigger('focusout')
+
+    expect(wrapper.emitted('blur')).toBeTruthy()
   })
 
   it('emits changed', async () => {