From 2de758a167985480728568dc4d9442bd6f8ad6b7 Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Mon, 1 Feb 2021 12:32:19 +0100
Subject: [PATCH] :bug: Fixed problem with context menu offscreen

---
 .../app/main/ui/components/context_menu.cljs  | 26 ++++++++++++++++---
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/main/ui/components/context_menu.cljs b/frontend/src/app/main/ui/components/context_menu.cljs
index d912a587c7..86b257333d 100644
--- a/frontend/src/app/main/ui/components/context_menu.cljs
+++ b/frontend/src/app/main/ui/components/context_menu.cljs
@@ -13,7 +13,8 @@
    [goog.object :as gobj]
    [app.main.ui.components.dropdown :refer [dropdown']]
    [app.common.uuid :as uuid]
-   [app.util.data :refer [classnames]]))
+   [app.util.data :refer [classnames]]
+   [app.util.dom :as dom]))
 
 (mf/defc context-menu
   {::mf/wrap-props false}
@@ -27,14 +28,31 @@
         is-selectable (gobj/get props "selectable")
         selected (gobj/get props "selected")
         top (gobj/get props "top")
-        left (gobj/get props "left")]
+        left (gobj/get props "left")
+
+        offset (mf/use-state 0)
+
+        check-menu-offscreen
+        (mf/use-callback
+         (mf/deps top @offset)
+         (fn [node]
+           (when node
+             (let [{node-height :height}   (dom/get-bounding-rect node)
+                   {window-height :height} (dom/get-window-size)
+                   target-offset (if (> (+ top node-height) window-height)
+                                   (- node-height)
+                                   0)]
+
+               (if (not= target-offset @offset)
+                 (reset! offset target-offset))))))]
+
     (when open?
       [:> dropdown' props
        [:div.context-menu {:class (classnames :is-open open?
                                               :is-selectable is-selectable)
-                           :style {:top top
+                           :style {:top (+ top @offset)
                                    :left left}}
-        [:ul.context-menu-items
+        [:ul.context-menu-items {:ref check-menu-offscreen}
          (for [[action-name action-handler] options]
            [:li.context-menu-item {:class (classnames :is-selected (and selected (= action-name selected)))
                                    :key action-name}