From ca913687365a7048a454c1ef4509285eab468764 Mon Sep 17 00:00:00 2001
From: zzz1ck <1412629+zzz1ck@users.noreply.github.com>
Date: Mon, 21 Oct 2024 17:41:06 +0300
Subject: [PATCH] Fix: UI jumps when open calendar then scroll from the view
 and click outside

---
 package.json                     | 2 +-
 src/components/Datepicker.vue    | 2 ++
 src/utils/IsElementInViewport.js | 9 +++++++++
 3 files changed, 12 insertions(+), 1 deletion(-)
 create mode 100644 src/utils/IsElementInViewport.js

diff --git a/package.json b/package.json
index d5bd30b1..49fcaa1e 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/Datepicker.vue b/src/components/Datepicker.vue
index c285394e..2826c0e5 100644
--- a/src/components/Datepicker.vue
+++ b/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();
       }
 
diff --git a/src/utils/IsElementInViewport.js b/src/utils/IsElementInViewport.js
new file mode 100644
index 00000000..513bf451
--- /dev/null
+++ b/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)
+  );
+}