Merge pull request #45 from reedsy/fix-chromium-crash

Fix Chromium browsers crash

Author: ricardoferrolho

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",

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

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 () => {