🐛 Fix blur input field when click on viewport

CHANGES.md

@@ -48,6 +48,7 @@
 - Fix navigate comments in right sidebar [Taiga #2163](https://tree.taiga.io/project/penpot/issue/2163)
 - Fix keep name of component equal to the shape name [Taiga #2341](https://tree.taiga.io/project/penpot/issue/2341)
 - Fix lossing changes when changing selection and an input was already changed [Taiga #2329](https://tree.taiga.io/project/penpot/issue/2329), [Taiga #2330](https://tree.taiga.io/project/penpot/issue/2330)
+- Fix blur input field when click on viewport [Taiga #2164](https://tree.taiga.io/project/penpot/issue/2164)
 
 ### :arrow_up: Deps updates
 

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

@@ -8,10 +8,13 @@
   (:require
    [app.util.color :as uc]
    [app.util.dom :as dom]
+   [app.util.globals :as globals]
    [app.util.i18n :as i18n :refer [tr]]
    [app.util.keyboard :as kbd]
    [app.util.object :as obj]
-   [rumext.alpha :as mf]))
+   [goog.events :as events]
+   [rumext.alpha :as mf])
+  (:import goog.events.EventType))
 
 (defn clean-color
   [value]
@@ -91,7 +94,14 @@
                (apply-value new-value)
                (update-input value)))))
 
-        ;; list-id (str "colors-" (uuid/next))
+        on-click
+        (mf/use-callback
+         (fn [event]
+           (let [target (dom/get-target event)]
+             (when (some? ref)
+               (let [current (mf/ref-val ref)]
+                 (when (and (some? current) (not (.contains current target)))
+                   (dom/blur! current)))))))
 
         props (-> props
                   (obj/without ["value" "onChange"])
@@ -119,6 +129,14 @@
           (let [handle-blur (:fn (mf/ref-val handle-blur-ref))]
             (handle-blur)))))
 
+    (mf/use-layout-effect
+     (fn []
+       (let [keys [(events/listen globals/window EventType.POINTERDOWN on-click)
+                   (events/listen globals/window EventType.MOUSEDOWN on-click)
+                   (events/listen globals/window EventType.CLICK on-click)]]
+         #(doseq [key keys]
+            (events/unlistenByKey key)))))
+
     [:*
      [:> :input props]
      ;; FIXME: this causes some weird interactions because of using apply-value

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

@@ -10,11 +10,14 @@
    [app.common.math :as math]
    [app.common.spec :as us]
    [app.util.dom :as dom]
+   [app.util.globals :as globals]
    [app.util.keyboard :as kbd]
    [app.util.object :as obj]
    [app.util.simple-math :as sm]
    [app.util.strings :as ust]
-   [rumext.alpha :as mf]))
+   [goog.events :as events]
+   [rumext.alpha :as mf])
+  (:import goog.events.EventType))
 
 (defn num? [val]
   (and (number? val)
@@ -176,6 +179,15 @@
                 (update-input new-value)))
             (when on-blur (on-blur))))
 
+        on-click
+        (mf/use-callback
+         (fn [event]
+           (let [target (dom/get-target event)]
+             (when (some? ref)
+               (let [current (mf/ref-val ref)]
+                 (when (and (some? current) (not (.contains current target)))
+                   (dom/blur! current)))))))
+
         props (-> props
                   (obj/without ["value" "onChange"])
                   (obj/set! "className" "input-text")
@@ -205,5 +217,13 @@
           (let [handle-blur (:fn (mf/ref-val handle-blur-ref))]
             (handle-blur)))))
 
+    (mf/use-layout-effect
+     (fn []
+       (let [keys [(events/listen globals/window EventType.POINTERDOWN on-click)
+                   (events/listen globals/window EventType.MOUSEDOWN on-click)
+                   (events/listen globals/window EventType.CLICK on-click)]]
+         #(doseq [key keys]
+            (events/unlistenByKey key)))))
+
     [:> :input props]))