From fe7f4004f14840d75d49d30d83d1d5fd7d2428fa Mon Sep 17 00:00:00 2001
From: Eva <eva.marco@kaleidos.net>
Date: Mon, 9 Jan 2023 12:51:10 +0100
Subject: [PATCH] :bug: Fix scape key to clear focus on input

---
 .../app/main/ui/components/numeric_input.cljs |  3 ++-
 .../src/app/main/ui/workspace/libraries.cljs  | 19 ++++++++++++++++---
 .../app/main/ui/workspace/sidebar/assets.cljs | 17 +++++++++++++++--
 .../app/main/ui/workspace/sidebar/layers.cljs | 17 +++++++++++++++--
 4 files changed, 48 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/main/ui/components/numeric_input.cljs b/frontend/src/app/main/ui/components/numeric_input.cljs
index 83a5bf029..ad772f1ac 100644
--- a/frontend/src/app/main/ui/components/numeric_input.cljs
+++ b/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
diff --git a/frontend/src/app/main/ui/workspace/libraries.cljs b/frontend/src/app/main/ui/workspace/libraries.cljs
index 1e6cdb160..a30e4f7d0 100644
--- a/frontend/src/app/main/ui/workspace/libraries.cljs
+++ b/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]
@@ -93,11 +94,22 @@
            (st/emit! (modal/show
                       {:type :delete-shared
                        :origin :unpublish
-                       :on-accept (fn[]
+                       :on-accept (fn []
                                     (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]
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs
index 44dd9af33..d29c5c903 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs
+++ b/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]
diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs
index caff9ca99..b5e93f97d 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs
+++ b/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]]