🐛 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).
+- 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 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 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 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

@@ -43,7 +43,7 @@
                                    (uc/prepend-hash))]
                  (dom/set-validity! input-node "")
                  new-value)
-              (catch :default _
+               (catch :default _e
                  (dom/set-validity! input-node (tr "errors.invalid-color"))
                  nil)))))
 
@@ -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]
+   [app.main.data.workspace :as dw]
-   [okulary.core :as l]
+   [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.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]
-   [app.main.data.workspace.common :as dwc]
+   [app.util.i18n :as i18n :refer [tr]]
-   [app.main.data.workspace.undo :as dwu]
+   [rumext.alpha :as mf]))
-   [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)))))
 
 (mf/defc options
-  [{:keys [page-id] :as props}]
+  {::mf/wrap [mf/memo]}
-  (let [locale (i18n/use-locale)
+  []
-        options (mf/deref refs/workspace-page-options)
+  (let [options (mf/deref refs/workspace-page-options)
-        handle-change-color (use-change-color page-id)
+
+        on-change
+        (fn [value]
+          (st/emit! (dw/change-canvas-color value)))
 
         on-open
-        (mf/use-callback
+        (fn []
-         (mf/deps page-id)
+          (st/emit! (dwu/start-undo-transaction)))
-         #(st/emit! (dwu/start-undo-transaction)))
 
         on-close
-        (mf/use-callback
+        (fn []
-         (mf/deps page-id)
+          (st/emit! (dwu/commit-undo-transaction)))]
-         #(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]
+   [app.common.data :as d]
-   [cuerdas.core :as str]
    [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.refs :as refs]
-   [app.main.ui.icons :as i]
-   [app.main.ui.context :as ctx]
    [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]