From e170011e3c6d19995e12bdfd593d672cf87da337 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Tue, 7 Mar 2023 17:34:50 +0100 Subject: [PATCH] :bug: Fix problem on selection numeric inputs on Firefox --- CHANGES.md | 1 + .../sidebar/options/menus/interactions.cljs | 4 ++-- .../sidebar/options/menus/layer.cljs | 2 +- .../options/menus/layout_container.cljs | 17 +++++++------- .../sidebar/options/menus/layout_item.cljs | 10 ++++----- .../sidebar/options/menus/measures.cljs | 22 +++++++++---------- .../sidebar/options/menus/shadow.cljs | 8 +++---- .../sidebar/options/rows/color_row.cljs | 4 ++-- .../sidebar/options/rows/stroke_row.cljs | 2 +- 9 files changed, 36 insertions(+), 34 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index 7f7118dca1..e4d45a2b91 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -23,6 +23,7 @@ - Allow selection of empty board by partial rect [Taiga #4806](https://tree.taiga.io/project/penpot/issue/4806) - Improve behavior for undo on text edition [Taiga #4693](https://tree.taiga.io/project/penpot/issue/4693) - Improve deeps selection of nested arboards [Taiga #4913](https://tree.taiga.io/project/penpot/issue/4913) +- Fix problem on selection numeric inputs on Firefox [#2991](https://github.com/penpot/penpot/issues/2991) ### :arrow_up: Deps updates diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs index 655d1873c5..eff892981d 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs @@ -336,7 +336,7 @@ [:span.element-set-subtitle.wide (tr "workspace.options.interaction-delay")] [:div.input-element {:title (tr "workspace.options.interaction-ms")} [:> numeric-input {:ref ext-delay-ref - :on-click (select-text ext-delay-ref) + :on-focus (select-text ext-delay-ref) :on-change change-delay :value (:delay interaction) :title (tr "workspace.options.interaction-ms")}] @@ -523,7 +523,7 @@ [:span.element-set-subtitle.wide (tr "workspace.options.interaction-duration")] [:div.input-element {:title (tr "workspace.options.interaction-ms")} [:> numeric-input {:ref ext-duration-ref - :on-click (select-text ext-duration-ref) + :on-focus (select-text ext-duration-ref) :on-change change-duration :value (-> interaction :animation :duration) :title (tr "workspace.options.interaction-ms")}] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs index 3aaec9d4c7..5623ed6693 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs @@ -113,7 +113,7 @@ [:div.input-element {:title (tr "workspace.options.opacity") :class "percentail"} [:> numeric-input {:value (-> values :opacity opacity->string) :placeholder (tr "settings.multiple") - :on-click select-all + :on-focus select-all :on-change handle-opacity-change :min 0 :max 100}]] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs index 1cc0397c6d..35f82540c4 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs @@ -266,10 +266,11 @@ [:span.icon.rotated i/auto-padding-both-sides] [:> numeric-input {:placeholder "--" - :on-click #(dom/select-target %) :on-change (partial on-change :simple :p1) :on-focus #(select-paddings true false true false) - :on-blur #(select-paddings false false false false) + :on-blur #(do + (dom/select-target %) + (select-paddings false false false false)) :value p1}]] [:div.padding-item.tooltip.tooltip-bottom-left @@ -277,9 +278,9 @@ [:span.icon i/auto-padding-both-sides] [:> numeric-input {:placeholder "--" - :on-click #(dom/select-target %) :on-change (partial on-change :simple :p2) - :on-focus #(select-paddings false true false true) + :on-focus #(do (dom/select-target %) + (select-paddings false true false true)) :on-blur #(select-paddings false false false false) :value p2}]]] @@ -296,9 +297,9 @@ [:div.input-element.auto [:> numeric-input {:placeholder "--" - :on-click #(dom/select-target %) :on-change (partial on-change :multiple num) - :on-focus #(select-padding num) + :on-focus #(do (dom/select-target %) + (select-padding num)) :on-blur #(select-paddings false false false false) :value (num (:layout-padding values))}]]])]) @@ -320,7 +321,7 @@ i/auto-gap] [:> numeric-input {:no-validate true :placeholder "--" - :on-click (fn [event] + :on-focus (fn [event] (reset! gap-selected? :column-gap) (dom/select-target event)) :on-change (partial set-gap (= :nowrap wrap-type) :column-gap) @@ -334,7 +335,7 @@ i/auto-gap] [:> numeric-input {:no-validate true :placeholder "--" - :on-click (fn [event] + :on-focus (fn [event] (reset! gap-selected? :row-gap) (dom/select-target event)) :on-change (partial set-gap (= :nowrap wrap-type) :row-gap) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs index bc7fae8616..4c41d3be33 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs @@ -58,7 +58,7 @@ [:span.icon i/auto-margin-both-sides] [:> numeric-input {:placeholder "--" - :on-click #(dom/select-target %) + :on-focus #(dom/select-target %) :on-change (partial on-margin-change :simple :m1) :value m1}]] @@ -67,7 +67,7 @@ [:span.icon.rotated i/auto-margin-both-sides] [:> numeric-input {:placeholder "--" - :on-click #(dom/select-target %) + :on-focus #(dom/select-target %) :on-change (partial on-margin-change :simple :m2) :value m2}]]] @@ -84,7 +84,7 @@ [:div.input-element.auto [:> numeric-input {:placeholder "--" - :on-click #(dom/select-target %) + :on-focus #(dom/select-target %) :on-change (partial on-margin-change :multiple num) :value (num (:layout-item-margin values))}]]])]) @@ -231,7 +231,7 @@ i/layers [:> numeric-input {:placeholder "--" - :on-click #(dom/select-target %) + :on-focus #(dom/select-target %) :on-change #(on-change-z-index %) :value (:layout-item-z-index values)}]]]]) @@ -281,7 +281,7 @@ :min 0 :data-wrap true :placeholder "--" - :on-click #(dom/select-target %) + :on-focus #(dom/select-target %) :on-change (partial on-size-change item) :value (get values item) :nillable true}]]])]]])]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs index e24b088d63..3169f5aefb 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs @@ -316,7 +316,7 @@ [:> numeric-input {:min 0.01 :no-validate true :placeholder "--" - :on-click select-all + :on-focus select-all :on-change on-width-change :disabled disabled-width-sizing? :value (:width values)}]] @@ -325,7 +325,7 @@ [:> numeric-input {:min 0.01 :no-validate true :placeholder "--" - :on-click select-all + :on-focus select-all :on-change on-height-change :disabled disabled-height-sizing? :value (:height values)}]] @@ -345,14 +345,14 @@ [:div.input-element.Xaxis {:title (tr "workspace.options.x")} [:> numeric-input {:no-validate true :placeholder "--" - :on-click select-all + :on-focus select-all :on-change on-pos-x-change :disabled disabled-position-x? :value (:x values)}]] [:div.input-element.Yaxis {:title (tr "workspace.options.y")} [:> numeric-input {:no-validate true :placeholder "--" - :on-click select-all + :on-focus select-all :disabled disabled-position-y? :on-change on-pos-y-change :value (:y values)}]]]) @@ -368,7 +368,7 @@ :max 359 :data-wrap true :placeholder "--" - :on-click select-all + :on-focus select-all :on-change on-rotation-change :value (:rotation values)}]]]) @@ -396,7 +396,7 @@ {:placeholder "--" :ref radius-input-ref :min 0 - :on-click select-all + :on-focus select-all :on-change on-radius-1-change :value (:rx values)}]] @@ -406,7 +406,7 @@ {:type "number" :placeholder "--" :min 0 - :on-click select-all + :on-focus select-all :on-change on-radius-multi-change :value ""}]] @@ -416,7 +416,7 @@ [:> numeric-input {:placeholder "--" :min 0 - :on-click select-all + :on-focus select-all :on-change on-radius-r1-change :value (:r1 values)}]] @@ -424,7 +424,7 @@ [:> numeric-input {:placeholder "--" :min 0 - :on-click select-all + :on-focus select-all :on-change on-radius-r2-change :value (:r2 values)}]] @@ -432,7 +432,7 @@ [:> numeric-input {:placeholder "--" :min 0 - :on-click select-all + :on-focus select-all :on-change on-radius-r3-change :value (:r3 values)}]] @@ -440,7 +440,7 @@ [:> numeric-input {:placeholder "--" :min 0 - :on-click select-all + :on-focus select-all :on-change on-radius-r4-change :value (:r4 values)}]]])]) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs index 7f2c91a4a5..b518d97631 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs @@ -150,7 +150,7 @@ [:> numeric-input {:ref adv-offset-x-ref :no-validate true :placeholder "--" - :on-click (select-text adv-offset-x-ref) + :on-focus (select-text adv-offset-x-ref) :on-change (update-attr index :offset-x valid-number? basic-offset-x-ref) :value (:offset-x value)}] [:span.after (tr "workspace.options.shadow-options.offsetx")]] @@ -159,7 +159,7 @@ [:> numeric-input {:ref adv-offset-y-ref :no-validate true :placeholder "--" - :on-click (select-text adv-offset-y-ref) + :on-focus (select-text adv-offset-y-ref) :on-change (update-attr index :offset-y valid-number? basic-offset-y-ref) :value (:offset-y value)}] [:span.after (tr "workspace.options.shadow-options.offsety")]]] @@ -169,7 +169,7 @@ [:> numeric-input {:ref adv-blur-ref :no-validate true :placeholder "--" - :on-click (select-text adv-blur-ref) + :on-focus (select-text adv-blur-ref) :on-change (update-attr index :blur valid-number? basic-blur-ref) :min 0 :value (:blur value)}] @@ -179,7 +179,7 @@ [:> numeric-input {:ref adv-spread-ref :no-validate true :placeholder "--" - :on-click (select-text adv-spread-ref) + :on-focus (select-text adv-spread-ref) :on-change (update-attr index :spread valid-number?) :value (:spread value)}] [:span.after (tr "workspace.options.shadow-options.spread")]]] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs index 4e2cc346b2..44a7593d91 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs @@ -196,7 +196,7 @@ "" (-> color :color uc/remove-hash)) :placeholder (tr "settings.multiple") - :on-click select-all + :on-focus select-all :on-blur on-blur :on-change handle-value-change}]] @@ -206,7 +206,7 @@ {:class (dom/classnames :percentail (not= (:opacity color) :multiple))} [:> numeric-input {:value (-> color :opacity opacity->string) :placeholder (tr "settings.multiple") - :on-click select-all + :on-focus select-all :on-blur on-blur :on-change handle-opacity-change :min 0 diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs index fb83ff3c34..62189be57c 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs @@ -100,7 +100,7 @@ :value (-> (:stroke-width stroke) width->string) :placeholder (tr "settings.multiple") :on-change (on-stroke-width-change index) - :on-click select-all + :on-focus select-all :on-blur on-blur}]] [:select#style.input-select {:value (enum->string (:stroke-alignment stroke))