🐛 Fix layer filter dropdown position + add auto-closing on Esc and outside click

frontend/src/app/main/ui/workspace/sidebar/layers.cljs

@@ -21,10 +21,14 @@
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.sidebar.layer-item :refer [layer-item]]
    [app.util.dom :as dom]
+   [app.util.globals :as globals]
    [app.util.i18n :as i18n :refer [tr]]
+   [app.util.keyboard :as kbd]
    [app.util.timers :as ts]
    [cuerdas.core :as str]
-   [rumext.v2 :as mf]))
+   [goog.events :as events]
+   [rumext.v2 :as mf])
+  (:import goog.events.EventType))
 
 ;; This components is a piece for sharding equality check between top
 ;; level frames and try to avoid rerender frames that are does not
@@ -158,6 +162,21 @@
         (mf/use-fn
          #(swap! state* update :show-menu not))
 
+        on-toggle-filters-click
+        (mf/use-fn
+         (fn [event]
+           (dom/stop-propagation event)
+           (toggle-filters)))
+
+        hide-menu
+        (mf/use-fn
+         #(swap! state* assoc :show-menu false))
+
+        on-key-down
+        (mf/use-fn
+         (fn [event]
+           (when (kbd/esc? event) (hide-menu))))
+
         update-search-text
         (mf/use-fn
          (fn [value _event]
@@ -190,6 +209,7 @@
         add-filter
         (mf/use-fn
          (fn [event]
+           (dom/stop-propagation event)
            (let [key (-> (dom/get-current-target event)
                          (dom/get-data "filter")
                          (keyword))]
@@ -226,6 +246,11 @@
            (when (<= current-items filtered-objects-total)
              (swap! state* update :num-items + 100))))]
 
+    (mf/with-effect []
+      (let [keys [(events/listen globals/document EventType.KEYDOWN on-key-down)
+                  (events/listen globals/document EventType.CLICK hide-menu)]]
+        (fn [] (doseq [key keys] (events/unlistenByKey key)))))
+
     [filtered-objects
      handle-show-more
      #(mf/html
@@ -236,7 +261,7 @@
                            :value current-search
                            :on-clear clear-search-text
                            :placeholder (tr "workspace.sidebar.layers.search")}
-            [:button {:on-click toggle-filters
+            [:button {:on-click on-toggle-filters-click
                       :class (stl/css-case
                               :filter-button true
                               :opened show-menu?
@@ -459,7 +484,7 @@
         (mf/use-fn
          #(st/emit! (dw/toggle-focus-mode)))]
 
-    [:div#layers
+    [:div#layers {:class (stl/css :layers)}
      (if (d/not-empty? focus)
        [:div {:class (stl/css :tool-window-bar)}
         [:button {:class (stl/css :focus-title)

frontend/src/app/main/ui/workspace/sidebar/layers.scss

@@ -164,10 +164,14 @@
   color: var(--pill-foreground-color);
 }
 
+.layers {
+  position: relative;
+}
+
 .filters-container {
   @extend .menu-dropdown;
-  top: $s-44;
-  left: $s-12;
+  position: absolute;
+  left: $s-20;
   width: $s-192;
   .filter-menu-item {
     @include bodyMedTipography;