🐛 Fix scape key to clear focus on input

frontend/src/app/main/ui/components/numeric_input.cljs

@@ -163,7 +163,8 @@
              (when enter?
                (dom/blur! input-node))
              (when esc?
-               (update-input value-str)))))
+               (update-input value-str)
+               (dom/blur! input-node)))))
 
         handle-mouse-wheel
         (mf/use-callback

frontend/src/app/main/ui/workspace/libraries.cljs

@@ -15,6 +15,7 @@
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
+   [app.util.keyboard :as kbd]
    [app.util.strings :refer [matches-search]]
    [cuerdas.core :as str]
    [okulary.core :as l]
@@ -97,7 +98,18 @@
                                     (st/emit! (dwl/set-file-shared (:id file) false))
                                     (modal/show! :libraries-dialog {}))
                        :on-cancel #(modal/show! :libraries-dialog {})
-                       :count-libraries 1}))))]
+                       :count-libraries 1}))))
+        handle-key-down
+        (mf/use-callback
+         (fn [event]
+           (let [enter? (kbd/enter? event)
+                 esc?   (kbd/esc? event)
+                 input-node (dom/event->target event)]
+
+             (when enter?
+               (dom/blur! input-node))
+             (when esc?
+               (dom/blur! input-node)))))]
     [:*
      [:div.section
       [:div.section-title (tr "workspace.libraries.in-this-file")]
@@ -130,7 +142,8 @@
         {:placeholder (tr "workspace.libraries.search-shared-libraries")
          :type "text"
          :value @search-term
-         :on-change on-search-term-change}]
+         :on-change on-search-term-change
+         :on-key-down handle-key-down}]
        (if (str/empty? @search-term)
          [:div.search-icon
           i/search]

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

@@ -2243,7 +2243,19 @@
            (let [value (-> (dom/get-target event)
                            (dom/get-value)
                            (d/read-string))]
-             (swap! filters assoc :box value))))]
+             (swap! filters assoc :box value))))
+
+        handle-key-down
+        (mf/use-callback
+         (fn [event]
+           (let [enter? (kbd/enter? event)
+                 esc?   (kbd/esc? event)
+                 input-node (dom/event->target event)]
+
+             (when enter?
+               (dom/blur! input-node))
+             (when esc?
+               (dom/blur! input-node)))))]
 
     [:div.assets-bar
      [:div.tool-window
@@ -2260,7 +2272,8 @@
          {:placeholder (tr "workspace.assets.search")
           :type "text"
           :value (:term @filters)
-          :on-change on-search-term-change}]
+          :on-change on-search-term-change
+          :on-key-down handle-key-down}]
         (if (str/empty? (:term @filters))
           [:div.search-icon
            i/search]

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

@@ -468,7 +468,19 @@
         handle-show-more
         (fn []
           (when (<= (:num-items @filter-state) (count filtered-objects-total))
-            (swap! filter-state update :num-items + 100)))]
+            (swap! filter-state update :num-items + 100)))
+
+        handle-key-down
+        (mf/use-callback
+         (fn [event]
+           (let [enter? (kbd/enter? event)
+                 esc?   (kbd/esc? event)
+                 input-node (dom/event->target event)]
+
+             (when enter?
+               (dom/blur! input-node))
+             (when esc?
+               (dom/blur! input-node)))))]
 
     [filtered-objects
      handle-show-more
@@ -483,7 +495,8 @@
             [:input {:on-change update-search-text
                      :value (:search-text @filter-state)
                      :auto-focus (:show-search-box @filter-state)
-                     :placeholder (tr "workspace.sidebar.layers.search")}]]
+                     :placeholder (tr "workspace.sidebar.layers.search")
+                     :on-key-down handle-key-down}]]
            (when (not (= "" (:search-text @filter-state)))
              [:span.clear {:on-click clear-search-text} i/exclude])]
           [:span {:on-click toggle-search} i/cross]]