Merge pull request #44 from reedsy/1416-the-ui-jumps-when-datepicker-…

…is-open-you-scroll-down-and-click-anywhere

Fix: UI jumps when open calendar then scroll from the view and click outside

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reedsy/vuejs-datepicker",
-  "version": "1.6.2-reedsy-2.1.8",
+  "version": "1.6.2-reedsy-2.1.9",
   "description": "A simple Vue.js datepicker component. Supports disabling of dates, inline mode, translations",
   "keywords": [
     "vue",

src/components/Datepicker.vue

@@ -168,6 +168,7 @@ 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';
 export default {
   name: 'DatePicker',
   components: {
@@ -603,6 +604,7 @@ export default {
         if (!input) return;
         const inputEl = input.$el.querySelector('input');
         if (!inputEl) return;
+        if (!isElementInViewport(inputEl)) return;
         inputEl.focus();
       }
 

src/utils/IsElementInViewport.js

@@ -0,0 +1,9 @@
+export function isElementInViewport(el) {
+  const rect = el.getBoundingClientRect();
+  return (
+    rect.top >= 0 &&
+    rect.left >= 0 &&
+    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+  );
+}

test/unit/specs/Datepicker/Datepicker.spec.js

@@ -432,6 +432,44 @@ describe('Focus after closing the datepicker', () => {
     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', () => {