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)
+  );
+}