3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-14 03:21:37 +02:00
Code Issues Projects Releases Packages Wiki Activity

🐛 Fix blur input field when click on viewport

Browse source
This commit is contained in:
alonso.torres 2022-01-12 09:25:05 +01:00
parent 9403f8fd6e
commit 4663c296cd
3 changed files with 42 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

22
frontend/src/app/main/ui/components/numeric_input.cljs
View file

@ -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]))