From 1ea96fee96713affc3e42da70cd0e557221c21c8 Mon Sep 17 00:00:00 2001 From: Mark Thompson Date: Thu, 21 Jul 2022 08:00:50 +0200 Subject: [PATCH] feat(datepicker): Make `focus` & `blur` events refer to entire datepicker --- docs/guide/Events/README.md | 26 +++++----- src/components/DateInput.vue | 7 +-- src/components/Datepicker.vue | 48 +++++++++---------- test/unit/specs/Datepicker/Datepicker.spec.js | 15 +++--- 4 files changed, 48 insertions(+), 48 deletions(-) diff --git a/docs/guide/Events/README.md b/docs/guide/Events/README.md index 6a65e4a0..d6b24bb8 100755 --- 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
_(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
_(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 index c5ac2492..f905e17d 100644 --- 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 index b2a17584..cf48af4e 100644 --- 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-` event */ diff --git a/test/unit/specs/Datepicker/Datepicker.spec.js b/test/unit/specs/Datepicker/Datepicker.spec.js index c032df8a..465809fa 100755 --- 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 () => {