diff --git a/CHANGES.md b/CHANGES.md index 967a1314d..476c024f5 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -47,6 +47,7 @@ - Changing pages while comments activated will not close the panel [#1350](https://github.com/penpot/penpot/issues/1350) - 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) ### :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 254a6c25f..f4cf702d3 100644 --- a/frontend/src/app/main/ui/components/color_input.cljs +++ b/frontend/src/app/main/ui/components/color_input.cljs @@ -13,6 +13,13 @@ [app.util.object :as obj] [rumext.alpha :as mf])) +(defn clean-color + [value] + (-> value + (uc/expand-hex) + (uc/parse-color) + (uc/prepend-hash))) + (mf/defc color-input {::mf/wrap-props false ::mf/forward-ref true} @@ -26,16 +33,17 @@ local-ref (mf/use-ref) ref (or external-ref local-ref) + ;; We need to store the handle-blur ref so we can call it on unmount + handle-blur-ref (mf/use-ref nil) + dirty-ref (mf/use-ref false) + parse-value (mf/use-callback (mf/deps ref) (fn [] (let [input-node (mf/ref-val ref)] (try - (let [new-value (-> (dom/get-value input-node) - (uc/expand-hex) - (uc/parse-color) - (uc/prepend-hash))] + (let [new-value (clean-color (dom/get-value input-node))] (dom/set-validity! input-node "") new-value) (catch :default _e @@ -53,7 +61,8 @@ (mf/use-callback (mf/deps on-change update-input) (fn [new-value] - (when new-value + (mf/set-ref-val! dirty-ref false) + (when (and new-value (not= (uc/remove-hash new-value) value)) (when on-change (on-change new-value)) (update-input new-value)))) @@ -62,6 +71,7 @@ (mf/use-callback (mf/deps apply-value update-input) (fn [event] + (mf/set-ref-val! dirty-ref true) (let [enter? (kbd/enter? event) esc? (kbd/esc? event)] (when enter? @@ -98,6 +108,17 @@ (when-let [node (mf/ref-val ref)] (dom/set-value! node value)))) + (mf/use-effect + (mf/deps handle-blur) + (fn [] + (mf/set-ref-val! handle-blur-ref {:fn handle-blur}))) + + (mf/use-layout-effect + (fn [] + #(when (mf/ref-val dirty-ref) + (let [handle-blur (:fn (mf/ref-val handle-blur-ref))] + (handle-blur))))) + [:* [:> :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 f385796da..b03e0a780 100644 --- a/frontend/src/app/main/ui/components/numeric_input.cljs +++ b/frontend/src/app/main/ui/components/numeric_input.cljs @@ -42,6 +42,10 @@ local-ref (mf/use-ref) ref (or external-ref local-ref) + ;; We need to store the handle-blur ref so we can call it on unmount + handle-blur-ref (mf/use-ref nil) + dirty-ref (mf/use-ref false) + ;; This `value` represents the previous value and is used as ;; initil value for the simple math expression evaluation. value (d/parse-integer value-str default-val) @@ -104,6 +108,7 @@ (mf/use-callback (mf/deps on-change update-input value) (fn [new-value] + (mf/set-ref-val! dirty-ref false) (when (and (not= new-value value) (some? on-change)) (on-change new-value)) (update-input new-value))) @@ -142,6 +147,7 @@ (mf/use-callback (mf/deps set-delta apply-value update-input) (fn [event] + (mf/set-ref-val! dirty-ref true) (let [up? (kbd/up-arrow? event) down? (kbd/down-arrow? event) enter? (kbd/enter? event) @@ -188,5 +194,16 @@ (when-not (dom/active? input-node) (dom/set-value! input-node value-str))))) + (mf/use-effect + (mf/deps handle-blur) + (fn [] + (mf/set-ref-val! handle-blur-ref {:fn handle-blur}))) + + (mf/use-layout-effect + (fn [] + #(when (mf/ref-val dirty-ref) + (let [handle-blur (:fn (mf/ref-val handle-blur-ref))] + (handle-blur))))) + [:> :input props])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs index 4bbe2c22c..07c7823e3 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs @@ -14,6 +14,7 @@ [app.main.data.workspace.colors :as dc] [app.main.store :as st] [app.main.ui.components.dropdown :refer [dropdown]] + [app.main.ui.components.numeric-input :refer [numeric-input]] [app.main.ui.icons :as i] [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]] [app.util.dom :as dom] @@ -208,11 +209,12 @@ [:div.input-element {:class (dom/classnames :pixels (not= (:stroke-width values) :multiple)) :title (tr "workspace.options.stroke-width")} - [:input.input-text {:type "number" - :min "0" - :value (-> (:stroke-width values) width->string) - :placeholder (tr "settings.multiple") - :on-change on-stroke-width-change}]] + + [:> numeric-input + {:min 0 + :value (-> (:stroke-width values) width->string) + :placeholder (tr "settings.multiple") + :on-change on-stroke-width-change}]] [:select#style.input-select {:value (enum->string (:stroke-alignment values)) :on-change on-stroke-alignment-change}