scroll block into view whenever it is clicked in Order tab

collective · Jul 2, 2024 · 2f54099 · 2f54099
1 parent 65a5e1e
commit 2f54099
Showing 1 changed file with 12 additions and 0 deletions.
diff --git a/packages/hydra-js/hydra.js b/packages/hydra-js/hydra.js
@@ -214,6 +214,16 @@ class Bridge {
     window.addEventListener('message', this.messageHandler);
   }
 
+  elementIsVisibleInViewport(el, partiallyVisible = false) {
+    const { top, left, bottom, right } = el.getBoundingClientRect();
+    const { innerHeight, innerWidth } = window;
+    return partiallyVisible
+      ? ((top > 0 && top < innerHeight) ||
+          (bottom > 0 && bottom < innerHeight)) &&
+          ((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth))
+      : top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth;
+  }
+
   observeForBlock(uid) {
     const observer = new MutationObserver((mutationsList, observer) => {
       for (const mutation of mutationsList) {
@@ -223,6 +233,8 @@ class Bridge {
           );
           if (blockElement) {
             this.selectBlock(blockElement);
+            !this.elementIsVisibleInViewport(blockElement, true) &&
+              blockElement.scrollIntoView({ behavior: 'smooth' });
             observer.disconnect();
             break;
           }