From 1acf67db5a8ce883df9e3e2aa7994699743538bc Mon Sep 17 00:00:00 2001
From: Martin Artnik <martin@scinote.net>
Date: Tue, 3 Oct 2023 16:03:11 +0200
Subject: [PATCH] Fix dropdown opening direction [SCI-9428]

---
 app/javascript/vue/shared/isInViewPort.js   | 14 +++++++++++++
 app/javascript/vue/shared/menu_dropdown.vue | 22 ++++++++-------------
 2 files changed, 22 insertions(+), 14 deletions(-)
 create mode 100644 app/javascript/vue/shared/isInViewPort.js

diff --git a/app/javascript/vue/shared/isInViewPort.js b/app/javascript/vue/shared/isInViewPort.js
new file mode 100644
index 000000000..334391102
--- /dev/null
+++ b/app/javascript/vue/shared/isInViewPort.js
@@ -0,0 +1,14 @@
+export function isInViewPort(el) {
+  const rect = el.getBoundingClientRect();
+
+  return (
+    rect.top >= 0 &&
+    rect.left >= 0 &&
+    rect.bottom <=
+      (window.innerHeight ||
+        document.documentElement.clientHeight) /*or $(window).height() */ &&
+    rect.right <=
+      (window.innerWidth ||
+        document.documentElement.clientWidth) /*or $(window).width() */
+  );
+}
diff --git a/app/javascript/vue/shared/menu_dropdown.vue b/app/javascript/vue/shared/menu_dropdown.vue
index e5e68e8c1..436bfba11 100644
--- a/app/javascript/vue/shared/menu_dropdown.vue
+++ b/app/javascript/vue/shared/menu_dropdown.vue
@@ -63,6 +63,8 @@
 
 <script>
 
+import { isInViewPort } from './isInViewPort.js';
+
 export default {
   name: 'DropdownMenu',
   props: {
@@ -82,18 +84,19 @@ export default {
   watch: {
     showMenu() {
       if (this.showMenu) {
+        this.openUp = false;
         this.$nextTick(() => {
           this.$refs.flyout.style.marginBottom = `${this.$refs.openBtn.offsetHeight}px`;
-          this.verticalPositionFlyout();
+          this.updateOpenDirectoin();
         })
       }
     }
   },
   mounted() {
-    document.addEventListener('scroll', this.verticalPositionFlyout);
+    document.addEventListener('scroll', this.updateOpenDirectoin);
   },
   unmounted() {
-    document.removeEventListener('scroll', this.verticalPositionFlyout);
+    document.removeEventListener('scroll', this.updateOpenDirectoin);
   },
   methods: {
     closeMenu() {
@@ -110,20 +113,11 @@ export default {
 
       this.closeMenu();
     },
-    verticalPositionFlyout() {
+    updateOpenDirectoin() {
       if (!this.showMenu) return;
 
-      const btn = this.$refs.openBtn;
-      const screenHeight = window.innerHeight;
-      const btnBottom = btn.getBoundingClientRect().bottom;
-
-      if (screenHeight / 2 < btnBottom) {
-        this.openUp = true;
-      } else {
-        this.openUp = false;
-      }
+      this.openUp = !isInViewPort(this.$refs.flyout);
     }
-
   }
 }
 </script>