diff --git a/package.json b/package.json index 49fcaa1e..324d5aaa 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@reedsy/vuejs-datepicker", - "version": "1.6.2-reedsy-2.1.9", + "version": "1.6.2-reedsy-2.1.10", "description": "A simple Vue.js datepicker component. Supports disabling of dates, inline mode, translations", "keywords": [ "vue", diff --git a/src/components/Datepicker.vue b/src/components/Datepicker.vue index 2826c0e5..3cb36925 100644 --- a/src/components/Datepicker.vue +++ b/src/components/Datepicker.vue @@ -168,7 +168,8 @@ import PickerYear from './PickerYear.vue'; import utils, { makeDateUtils } from '../utils/DateUtils'; import { ELEMENT_IDS } from '../config/ElementIds'; import { getFocusableChildren } from '../utils/FocusableElements'; -import { isElementInViewport } from '../utils/IsElementInViewport'; +// TODO: reenable later if Chromium-based browsers issue is fixed +// import { isElementInViewport } from '../utils/IsElementInViewport'; export default { name: 'DatePicker', components: { @@ -598,17 +599,21 @@ export default { if (this.isInline) return; - if (emitEvent) { - this.$emit('closed'); - const input = this.$refs.input; - if (!input) return; - const inputEl = input.$el.querySelector('input'); - if (!inputEl) return; - if (!isElementInViewport(inputEl)) return; - inputEl.focus(); - } - document.removeEventListener('click', this.clickOutside, false); + + if (emitEvent) this.$emit('closed'); + + // This causes the current Chrome/Chromium-based browsers + // version to crash on macOS Sonoma + // + // TODO: reevaluate and test on newer versions + // + // const input = this.$refs.input; + // if (!input) return; + // const inputEl = input.$el.querySelector('input'); + // if (!inputEl) return; + // if (!isElementInViewport(inputEl)) return; + // inputEl.focus(); }, /** * Initiate the component diff --git a/test/unit/specs/Datepicker/Datepicker.spec.js b/test/unit/specs/Datepicker/Datepicker.spec.js index 00f467f3..c475088d 100644 --- a/test/unit/specs/Datepicker/Datepicker.spec.js +++ b/test/unit/specs/Datepicker/Datepicker.spec.js @@ -424,53 +424,54 @@ describe('Focus after opening the datepicker', () => { }); }); -describe('Focus after closing the datepicker', () => { - it('should focus on the input', async () => { - const wrapper = mount(Datepicker, { attachTo: document.body }); - await wrapper.vm.showCalendar(); - wrapper.vm.close(true); - const input = wrapper.vm.$refs.input.$el.querySelector('input'); - expect(document.activeElement).toEqual(input); - }); - describe('after scrolling and clicking outside', () => { - let wrapper; - let originalGetBoundingClientRect; - beforeEach(() => { - wrapper = mount(Datepicker, { attachTo: document.body }); - originalGetBoundingClientRect = Element.prototype.getBoundingClientRect; - }); - afterEach(() => { - Element.prototype.getBoundingClientRect = originalGetBoundingClientRect; - wrapper.unmount(); - }); - - it('should focus on the input when it is in viewport', async () => { - Element.prototype.getBoundingClientRect = jest.fn(() => ({ - top: 100, - bottom: 0, - left: 0, - right: 0, - })); - await wrapper.vm.showCalendar(); - wrapper.vm.clickOutside({ target: document.body }); - const input = wrapper.vm.$refs.input.$el.querySelector('input'); - expect(document.activeElement).toEqual(input); - }); - - it('should not focus on the input when it is out of viewport', async () => { - Element.prototype.getBoundingClientRect = jest.fn(() => ({ - top: -100, - bottom: 0, - left: 0, - right: 0, - })); - await wrapper.vm.showCalendar(); - wrapper.vm.clickOutside({ target: document.body }); - const input = wrapper.vm.$refs.input.$el.querySelector('input'); - expect(document.activeElement).not.toEqual(input); - }); - }); -}); +// TODO: reenable later if Chromium-based browsers issue is fixed +// describe('Focus after closing the datepicker', () => { +// it('should focus on the input', async () => { +// const wrapper = mount(Datepicker, { attachTo: document.body }); +// await wrapper.vm.showCalendar(); +// wrapper.vm.close(true); +// const input = wrapper.vm.$refs.input.$el.querySelector('input'); +// expect(document.activeElement).toEqual(input); +// }); +// describe('after scrolling and clicking outside', () => { +// let wrapper; +// let originalGetBoundingClientRect; +// beforeEach(() => { +// wrapper = mount(Datepicker, { attachTo: document.body }); +// originalGetBoundingClientRect = Element.prototype.getBoundingClientRect; +// }); +// afterEach(() => { +// Element.prototype.getBoundingClientRect = originalGetBoundingClientRect; +// wrapper.unmount(); +// }); + +// it('should focus on the input when it is in viewport', async () => { +// Element.prototype.getBoundingClientRect = jest.fn(() => ({ +// top: 100, +// bottom: 0, +// left: 0, +// right: 0, +// })); +// await wrapper.vm.showCalendar(); +// wrapper.vm.clickOutside({ target: document.body }); +// const input = wrapper.vm.$refs.input.$el.querySelector('input'); +// expect(document.activeElement).toEqual(input); +// }); + +// it('should not focus on the input when it is out of viewport', async () => { +// Element.prototype.getBoundingClientRect = jest.fn(() => ({ +// top: -100, +// bottom: 0, +// left: 0, +// right: 0, +// })); +// await wrapper.vm.showCalendar(); +// wrapper.vm.clickOutside({ target: document.body }); +// const input = wrapper.vm.$refs.input.$el.querySelector('input'); +// expect(document.activeElement).not.toEqual(input); +// }); +// }); +// }); describe('Modal', () => { it('closes the datepicker if clicked on overlay', async () => {