🐛 Fix incorrect value handling on color-input component.

Related to the bug when the input value of the page color
is not refreshed on page change.

CHANGES.md

@@ -14,10 +14,11 @@
 
 ### :bug: Bugs fixed
 
-- Remove unnecesary redirect from history when user goes to workspace from dashboard [Taiga 1820](https://tree.taiga.io/project/penpot/issue/1820).
-- Fix tooltip position on view application [Taiga 1819](https://tree.taiga.io/project/penpot/issue/1819).
-- Fix dashboard navigation on moving file to other team [Taiga 1817](https://tree.taiga.io/project/penpot/issue/1817).
-- Fix workspace header presence styles and invalid link [Taiga 1813](https://tree.taiga.io/project/penpot/issue/1813).
+- Remove unnecesary redirect from history when user goes to workspace from dashboard [Taiga #1820](https://tree.taiga.io/project/penpot/issue/1820).
+- Fix tooltip position on view application [Taiga #1819](https://tree.taiga.io/project/penpot/issue/1819).
+- Fix dashboard navigation on moving file to other team [Taiga #1817](https://tree.taiga.io/project/penpot/issue/1817).
+- Fix workspace header presence styles and invalid link [Taiga #1813](https://tree.taiga.io/project/penpot/issue/1813).
+- Fix color-input wrong behavior (on workspace page color) [Taiga #1795](https://tree.taiga.io/project/penpot/issue/1795).
 
 ### :arrow_up: Deps updates
 ### :boom: Breaking changes

frontend/src/app/main/ui/components/color_input.cljs

@@ -22,46 +22,46 @@
   {::mf/wrap-props false
    ::mf/forward-ref true}
   [props external-ref]
-  (let [value (obj/get props "value")
+  (let [value     (obj/get props "value")
         on-change (obj/get props "onChange")
 
         ;; We need a ref pointing to the input dom element, but the user
         ;; of this component may provide one (that is forwarded here).
         ;; So we use the external ref if provided, and the local one if not.
         local-ref (mf/use-ref)
-        ref (or external-ref local-ref)
+        ref       (or external-ref local-ref)
 
         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))]
-                  (dom/set-validity! input-node "")
-                  new-value)
-              (catch :default _
-                (dom/set-validity! input-node (tr "errors.invalid-color"))
-                nil)))))
+         (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))]
+                 (dom/set-validity! input-node "")
+                 new-value)
+               (catch :default _e
+                 (dom/set-validity! input-node (tr "errors.invalid-color"))
+                 nil)))))
 
         update-input
         (mf/use-callback
-          (mf/deps ref)
-          (fn [new-value]
-            (let [input-node (mf/ref-val ref)]
-              (dom/set-value! input-node (uc/remove-hash new-value)))))
+         (mf/deps ref)
+         (fn [new-value]
+           (let [input-node (mf/ref-val ref)]
+             (dom/set-value! input-node (uc/remove-hash new-value)))))
 
         apply-value
         (mf/use-callback
-          (mf/deps on-change update-input)
-          (fn [new-value]
-            (when new-value
-              (when on-change
-                (on-change new-value))
-              (update-input new-value))))
+         (mf/deps on-change update-input)
+         (fn [new-value]
+           (when new-value
+             (when on-change
+               (on-change new-value))
+             (update-input new-value))))
 
         handle-key-down
         (mf/use-callback
@@ -79,12 +79,12 @@
 
         handle-blur
         (mf/use-callback
-          (mf/deps parse-value apply-value update-input)
-          (fn [event]
-            (let [new-value (parse-value)]
-              (if new-value
-                (apply-value new-value)
-                (update-input value)))))
+         (mf/deps parse-value apply-value update-input)
+         (fn [event]
+           (let [new-value (parse-value)]
+             (if new-value
+               (apply-value new-value)
+               (update-input value)))))
 
         ;; list-id (str "colors-" (uuid/next))
 
@@ -97,6 +97,12 @@
                   (obj/set! "onKeyDown" handle-key-down)
                   (obj/set! "onBlur" handle-blur))]
 
+    (mf/use-effect
+     (mf/deps value)
+     (fn []
+       (when-let [node (mf/ref-val ref)]
+         (dom/set-value! node value))))
+
     [:*
      [:> :input props]
      ;; FIXME: this causes some weird interactions because of using apply-value

frontend/src/app/main/ui/workspace/sidebar/options.cljs

@@ -66,7 +66,7 @@
         [:div.element-options
          [:& align-options]
          (case (count selected)
-           0 [:& page/options {:page-id page-id}]
+           0 [:& page/options]
            1 [:& shape-options {:shape (first shapes)
                                 :page-id page-id
                                 :file-id file-id

frontend/src/app/main/ui/workspace/sidebar/options/page.cljs

@@ -7,46 +7,39 @@
 (ns app.main.ui.workspace.sidebar.options.page
   "Page options menu entries."
   (:require
-   [rumext.alpha :as mf]
-   [okulary.core :as l]
+   [app.main.data.workspace :as dw]
+   [app.main.data.workspace.undo :as dwu]
    [app.main.refs :as refs]
    [app.main.store :as st]
-   [app.main.data.workspace :as dw]
-   [app.main.data.workspace.common :as dwc]
-   [app.main.data.workspace.undo :as dwu]
-   [app.util.i18n :as i18n :refer [t]]
-   [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]))
-
-(defn use-change-color [page-id]
-  (mf/use-callback
-   (mf/deps page-id)
-   (fn [value]
-     (st/emit! (dw/change-canvas-color value)))))
+   [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]
+   [app.util.i18n :as i18n :refer [tr]]
+   [rumext.alpha :as mf]))
 
 (mf/defc options
-  [{:keys [page-id] :as props}]
-  (let [locale (i18n/use-locale)
-        options (mf/deref refs/workspace-page-options)
-        handle-change-color (use-change-color page-id)
+  {::mf/wrap [mf/memo]}
+  []
+  (let [options (mf/deref refs/workspace-page-options)
+
+        on-change
+        (fn [value]
+          (st/emit! (dw/change-canvas-color value)))
 
         on-open
-        (mf/use-callback
-         (mf/deps page-id)
-         #(st/emit! (dwu/start-undo-transaction)))
+        (fn []
+          (st/emit! (dwu/start-undo-transaction)))
 
         on-close
-        (mf/use-callback
-         (mf/deps page-id)
-         #(st/emit! (dwu/commit-undo-transaction)))]
+        (fn []
+          (st/emit! (dwu/commit-undo-transaction)))]
 
     [:div.element-set
-     [:div.element-set-title (t locale "workspace.options.canvas-background")]
+     [:div.element-set-title (tr "workspace.options.canvas-background")]
      [:div.element-set-content
       [:& color-row {:disable-gradient true
                      :disable-opacity true
                      :color {:color (get options :background "#E8E9EA")
                              :opacity 1}
-                     :on-change handle-change-color
+                     :on-change on-change
                      :on-open on-open
                      :on-close on-close}]]]))
 

frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs

@@ -6,23 +6,22 @@
 
 (ns app.main.ui.workspace.sidebar.options.rows.color-row
   (:require
-   [rumext.alpha :as mf]
-   [cuerdas.core :as str]
+   [app.common.data :as d]
    [app.common.math :as math]
    [app.common.pages :as cp]
-   [app.common.data :as d]
-   [app.util.dom :as dom]
-   [app.util.data :refer [classnames]]
-   [app.util.i18n :as i18n :refer [tr]]
-   [app.util.color :as uc]
-   [app.main.refs :as refs]
    [app.main.data.modal :as modal]
-   [app.main.ui.hooks :as h]
-   [app.main.ui.icons :as i]
-   [app.main.ui.context :as ctx]
+   [app.main.refs :as refs]
    [app.main.ui.components.color-bullet :as cb]
    [app.main.ui.components.color-input :refer [color-input]]
-   [app.main.ui.components.numeric-input :refer [numeric-input]]))
+   [app.main.ui.components.numeric-input :refer [numeric-input]]
+   [app.main.ui.context :as ctx]
+   [app.main.ui.hooks :as h]
+   [app.main.ui.icons :as i]
+   [app.util.color :as uc]
+   [app.util.data :refer [classnames]]
+   [app.util.dom :as dom]
+   [app.util.i18n :as i18n :refer [tr]]
+   [rumext.alpha :as mf]))
 
 (defn color-picker-callback
   [color disable-gradient disable-opacity handle-change-color handle-open handle-close]

frontend/src/app/util/dom.cljs

@@ -128,7 +128,7 @@
 
 (defn set-value!
   [node value]
-  (set! (.-value node) value))
+  (set! (.-value ^js node) value))
 
 (defn select-text!
   [node]