🐛 Fix lossing changes when changing selection and an input was already changed

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
 

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

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

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}