🐛 Fix focus handling on comment edition

CHANGES.md

@@ -54,6 +54,7 @@
 - Fix problem with HSV color picker [#3317](https://github.com/penpot/penpot/issues/3317)
 - Fix problem with slashes in layers names for exporter [#3276](https://github.com/penpot/penpot/issues/3276)
 - Fix incorrect modified data on moving files on dashboard [Taiga #5530](https://tree.taiga.io/project/penpot/issue/5530)
+- Fix focus handling on comments edition [Taiga #5560](https://tree.taiga.io/project/penpot/issue/5560)
 
 ### :arrow_up: Deps updates
 

frontend/src/app/main/ui/comments.cljs

@@ -6,6 +6,7 @@
 
 (ns app.main.ui.comments
   (:require
+   [app.common.data :as d]
    [app.common.data.macros :as dm]
    [app.common.geom.point :as gpt]
    [app.config :as cfg]
@@ -19,24 +20,26 @@
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
    [app.util.keyboard :as kbd]
-   [app.util.object :as obj]
    [app.util.time :as dt]
    [cuerdas.core :as str]
    [okulary.core :as l]
    [rumext.v2 :as mf]))
 
 (mf/defc resizing-textarea
-  {::mf/wrap-props false}
-  [props]
-  (let [value       (obj/get props "value" "")
-        on-focus    (obj/get props "on-focus")
-        on-blur     (obj/get props "on-blur")
-        placeholder (obj/get props "placeholder")
-        on-change   (obj/get props "on-change")
-        on-esc      (obj/get props "on-esc")
-        autofocus?  (obj/get props "autofocus")
+  {::mf/wrap-props false
+   ::mf/forward-ref true}
+  [props ref]
+  (let [value            (d/nilv (unchecked-get props "value") "")
+        on-focus         (unchecked-get props "on-focus")
+        on-blur          (unchecked-get props "on-blur")
+        placeholder      (unchecked-get props "placeholder")
+        on-change        (unchecked-get props "on-change")
+        on-esc           (unchecked-get props "on-esc")
+        autofocus?       (unchecked-get props "autofocus")
+        select-on-focus? (unchecked-get props "select-on-focus")
 
-        ref         (mf/use-ref)
+        local-ref   (mf/use-ref)
+        ref         (or ref local-ref)
 
         on-key-down
         (mf/use-fn
@@ -50,7 +53,22 @@
          (mf/deps on-change)
          (fn [event]
            (let [content (dom/get-target-val event)]
-             (on-change content))))]
+             (on-change content))))
+
+        on-focus*
+        (mf/use-fn
+         (mf/deps select-on-focus? on-focus)
+         (fn [event]
+           (when (fn? on-focus)
+             (on-focus event))
+
+           (when ^boolean select-on-focus?
+             (let [target (dom/get-target event)]
+               (dom/select-text! target)
+               ;; In webkit browsers the mouseup event will be called after the on-focus causing and unselect
+               (.addEventListener target "mouseup" dom/prevent-default #js {:once true})))))
+        ]
+
 
 
     (mf/use-layout-effect
@@ -64,7 +82,7 @@
      {:ref ref
       :auto-focus autofocus?
       :on-key-down on-key-down
-      :on-focus on-focus
+      :on-focus on-focus*
       :on-blur on-blur
       :value value
       :placeholder placeholder
@@ -185,10 +203,14 @@
         on-submit*
         (mf/use-fn
          (mf/deps @content)
-         (fn [] (on-submit @content)))]
+         (fn [] (on-submit @content)))
+        ]
+
 
     [:div.reply-form.edit-form
      [:& resizing-textarea {:value @content
+                            :autofocus true
+                            :select-on-focus true
                             :on-change on-change}]
      [:div.buttons
       [:input.btn-primary {:type "button" :value "Post" :on-click on-submit*}]
@@ -268,6 +290,7 @@
           (if (:is-resolved thread)
             [:span i/checkbox-checked]
             [:span i/checkbox-unchecked])])
+
        (when (= (:id profile) (:id owner))
          [:div.options
           [:div.options-icon {:on-click on-show-options} i/actions]])]

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

@@ -199,11 +199,6 @@
                  (when (and (some? current) (not (.contains current target)))
                    (dom/blur! current)))))))
 
-        on-mouse-up
-        (mf/use-callback
-         (fn [event]
-           (dom/prevent-default event)))
-
         handle-focus
         (mf/use-callback
          (fn [event]
@@ -212,9 +207,9 @@
                (on-focus event))
 
              (when select-on-focus?
-               (-> event (dom/get-target) (.select))
+               (dom/select-text! event)
                ;; In webkit browsers the mouseup event will be called after the on-focus causing and unselect
-               (.addEventListener target "mouseup" on-mouse-up #js {"once" true})))))
+               (.addEventListener target "mouseup" dom/prevent-default #js {:once true})))))
 
         props (-> props
                   (obj/without ["value" "onChange" "nillable" "onFocus"])

frontend/src/app/util/dom.cljs

@@ -234,7 +234,7 @@
 
 (defn select-text!
   [^js node]
-  (when (and (some? node) (or (= "INPUT" (.-tagName node)) (= "TEXTAREA" (.-tagName node))))
+  (when (some? node)
     (.select ^js node)))
 
 (defn ^boolean equals?