Fix dropdown opening direction [SCI-9428]

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

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;
+      this.openUp = !isInViewPort(this.$refs.flyout);
-      const screenHeight = window.innerHeight;
-      const btnBottom = btn.getBoundingClientRect().bottom;
-
-      if (screenHeight / 2 < btnBottom) {
-        this.openUp = true;
-      } else {
-        this.openUp = false;
     }
   }
-
-  }
 }
 </script>