From 4663c296cdfd701f35d24585c4eae77200c67d55 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Wed, 12 Jan 2022 09:25:05 +0100 Subject: [PATCH] :bug: Fix blur input field when click on viewport --- CHANGES.md | 1 + .../app/main/ui/components/color_input.cljs | 22 +++++++++++++++++-- .../app/main/ui/components/numeric_input.cljs | 22 ++++++++++++++++++- 3 files changed, 42 insertions(+), 3 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index 476c024f55..1cfbc1979f 100644 --- a/CHANGES.md +++ b/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 diff --git a/frontend/src/app/main/ui/components/color_input.cljs b/frontend/src/app/main/ui/components/color_input.cljs index f4cf702d35..779e8187e2 100644 --- a/frontend/src/app/main/ui/components/color_input.cljs +++ b/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 diff --git a/frontend/src/app/main/ui/components/numeric_input.cljs b/frontend/src/app/main/ui/components/numeric_input.cljs index b03e0a7804..258fe0035a 100644 --- a/frontend/src/app/main/ui/components/numeric_input.cljs +++ b/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]))