From b31afcfb4774f6a6f301db8bbbb98f46d2877d28 Mon Sep 17 00:00:00 2001
From: Andrey Antukh <niwi@niwi.nz>
Date: Tue, 26 Nov 2024 10:15:55 +0100
Subject: [PATCH] :bug: Fix incorrect use of forward-ref on input* control
 component

And in the derived input-tokens* component
---
 .../src/app/main/ui/ds/controls/input.cljs    | 37 ++++++++++++-------
 .../components/controls/input_tokens.cljs     | 13 +++----
 .../app/main/ui/workspace/tokens/form.cljs    |  2 +-
 3 files changed, 30 insertions(+), 22 deletions(-)

diff --git a/frontend/src/app/main/ui/ds/controls/input.cljs b/frontend/src/app/main/ui/ds/controls/input.cljs
index ae74123c3..0df0c0c6d 100644
--- a/frontend/src/app/main/ui/ds/controls/input.cljs
+++ b/frontend/src/app/main/ui/ds/controls/input.cljs
@@ -9,6 +9,7 @@
    [app.common.data.macros :as dm]
    [app.main.style :as stl])
   (:require
+   [app.common.data :as d]
    [app.main.ui.ds.foundations.assets.icon :refer [icon* icon-list]]
    [app.util.dom :as dom]
    [rumext.v2 :as mf]))
@@ -25,17 +26,25 @@
   {::mf/props :obj
    ::mf/forward-ref true
    ::mf/schema schema:input}
-  [{:keys [icon class type external-ref] :rest props}]
-  (let [ref (or external-ref (mf/use-ref))
-        type (or type "text")
-        icon-class (stl/css-case :input true
-                                 :input-with-icon (some? icon))
-        props (mf/spread-props props {:class icon-class :ref ref :type type})
-        handle-icon-click (mf/use-fn (mf/deps ref)
-                                     (fn [_]
-                                       (let [input-node (mf/ref-val ref)]
-                                         (dom/select-node input-node)
-                                         (dom/focus! input-node))))]
-    [:> "span" {:class (dm/str class " " (stl/css :container))}
-     (when icon [:> icon* {:id icon :class (stl/css :icon) :on-click handle-icon-click}])
-     [:> "input" props]]))
+  [{:keys [icon class type] :rest props} ref]
+  (let [ref   (or ref (mf/use-ref))
+        type  (d/nilv type "text")
+        props (mf/spread-props props
+                               :class (stl/css-case
+                                       :input true
+                                       :input-with-icon (some? icon))
+                               :ref ref
+                               :type type)
+
+        on-icon-click
+        (mf/use-fn
+         (mf/deps ref)
+         (fn [_event]
+           (let [input-node (mf/ref-val ref)]
+             (dom/select-node input-node)
+             (dom/focus! input-node))))]
+
+    [:> :span {:class (dm/str class " " (stl/css :container))}
+     (when (some? icon)
+       [:> icon* {:id icon :class (stl/css :icon) :on-click on-icon-click}])
+     [:> :input props]]))
diff --git a/frontend/src/app/main/ui/workspace/tokens/components/controls/input_tokens.cljs b/frontend/src/app/main/ui/workspace/tokens/components/controls/input_tokens.cljs
index dbb75a2b3..ad4e1ebce 100644
--- a/frontend/src/app/main/ui/workspace/tokens/components/controls/input_tokens.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/components/controls/input_tokens.cljs
@@ -25,19 +25,18 @@
   {::mf/props :obj
    ::mf/forward-ref true
    ::mf/schema schema::input-tokens}
-  [{:keys [class label external-ref id error value children] :rest props}]
-  (let [ref (or external-ref (mf/use-ref))
+  [{:keys [class label id error value children] :rest props} ref]
+  (let [ref   (or ref (mf/use-ref))
         props (mf/spread-props props {:id id
                                       :type "text"
                                       :class (stl/css :input)
                                       :aria-invalid error
                                       :value value
-                                      :external-ref ref})]
-    [:div {:class (dm/str class " "
-                          (stl/css-case :wrapper true
-                                        :input-error error))}
+                                      :ref ref})]
+    [:div {:class (dm/str class " " (stl/css-case :wrapper true
+                                                  :input-error error))}
      [:label {:for id :class (stl/css :label)} label]
      [:div {:class (stl/css :input-wrapper)}
-      (when children
+      (when (some? children)
         [:div {:class (stl/css :input-swatch)} children])
       [:> input* props]]]))
diff --git a/frontend/src/app/main/ui/workspace/tokens/form.cljs b/frontend/src/app/main/ui/workspace/tokens/form.cljs
index 748313baa..fcb34661d 100644
--- a/frontend/src/app/main/ui/workspace/tokens/form.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/form.cljs
@@ -390,7 +390,7 @@ Token names should only contain letters and digits separated by . characters.")}
          :placeholder (tr "workspace.token.enter-token-value")
          :label (tr "workspace.token.token-value")
          :default-value @value-ref
-         :external-ref value-input-ref
+         :ref value-input-ref
          :on-change on-update-value
          :on-blur on-update-value}
         (when color?