Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-01 20:09:04 -05:00
Code Issues Activity

🐛 Fix incorrect use of forward-ref on input* control component

Browse source 
And in the derived input-tokens* component
This commit is contained in:
Andrey Antukh 2024-11-26 10:15:55 +01:00
parent 052b39d833
commit b31afcfb47
3 changed files with 30 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
frontend/src/app/main/ui/ds/controls/input.cljs
View file

@ -9,6 +9,7 @@
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
[app.main.style :as stl]) [app.main.style :as stl])
(:require (:require
[app.common.data :as d]
[app.main.ui.ds.foundations.assets.icon :refer [icon* icon-list]] [app.main.ui.ds.foundations.assets.icon :refer [icon* icon-list]]
[app.util.dom :as dom] [app.util.dom :as dom]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
@ -25,17 +26,25 @@
{::mf/props :obj {::mf/props :obj
::mf/forward-ref true ::mf/forward-ref true
::mf/schema schema:input} ::mf/schema schema:input}
[{:keys [icon class type external-ref] :rest props}] [{:keys [icon class type] :rest props} ref]
(let [ref (or external-ref (mf/use-ref)) (let [ref (or ref (mf/use-ref))
type (or type "text") type (d/nilv type "text")
icon-class (stl/css-case :input true props (mf/spread-props props
:class (stl/css-case
:input true
:input-with-icon (some? icon)) :input-with-icon (some? icon))
props (mf/spread-props props {:class icon-class :ref ref :type type}) :ref ref
handle-icon-click (mf/use-fn (mf/deps ref) :type type)
(fn [_]
on-icon-click
(mf/use-fn
(mf/deps ref)
(fn [_event]
(let [input-node (mf/ref-val ref)] (let [input-node (mf/ref-val ref)]
(dom/select-node input-node) (dom/select-node input-node)
(dom/focus! input-node))))] (dom/focus! input-node))))]
[:> "span" {:class (dm/str class " " (stl/css :container))}
(when icon [:> icon* {:id icon :class (stl/css :icon) :on-click handle-icon-click}]) [:> :span {:class (dm/str class " " (stl/css :container))}
[:> "input" props]])) (when (some? icon)
[:> icon* {:id icon :class (stl/css :icon) :on-click on-icon-click}])
[:> :input props]]))

11
frontend/src/app/main/ui/workspace/tokens/components/controls/input_tokens.cljs
View file

@ -25,19 +25,18 @@
{::mf/props :obj {::mf/props :obj
::mf/forward-ref true ::mf/forward-ref true
::mf/schema schema::input-tokens} ::mf/schema schema::input-tokens}
[{:keys [class label external-ref id error value children] :rest props}] [{:keys [class label id error value children] :rest props} ref]
(let [ref (or external-ref (mf/use-ref)) (let [ref (or ref (mf/use-ref))
props (mf/spread-props props {:id id props (mf/spread-props props {:id id
:type "text" :type "text"
:class (stl/css :input) :class (stl/css :input)
:aria-invalid error :aria-invalid error
:value value :value value
:external-ref ref})] :ref ref})]
[:div {:class (dm/str class " " [:div {:class (dm/str class " " (stl/css-case :wrapper true
(stl/css-case :wrapper true
:input-error error))} :input-error error))}
[:label {:for id :class (stl/css :label)} label] [:label {:for id :class (stl/css :label)} label]
[:div {:class (stl/css :input-wrapper)} [:div {:class (stl/css :input-wrapper)}
(when children (when (some? children)
[:div {:class (stl/css :input-swatch)} children]) [:div {:class (stl/css :input-swatch)} children])
[:> input* props]]])) [:> input* props]]]))

2
frontend/src/app/main/ui/workspace/tokens/form.cljs
View file

@ -390,7 +390,7 @@ Token names should only contain letters and digits separated by . characters.")}
:placeholder (tr "workspace.token.enter-token-value") :placeholder (tr "workspace.token.enter-token-value")
:label (tr "workspace.token.token-value") :label (tr "workspace.token.token-value")
:default-value @value-ref :default-value @value-ref
:external-ref value-input-ref :ref value-input-ref
:on-change on-update-value :on-change on-update-value
:on-blur on-update-value} :on-blur on-update-value}
(when color? (when color?