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

…cker
sumcumo · 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 () => {