🐛 Fix drag-select when renaming layer text

CHANGES.md

@@ -64,6 +64,7 @@
 - Fix cannot click on blocked elements in viewer [Taiga #1430](https://tree.taiga.io/project/penpot/issue/1430)
 - Fix SVG not showing properties at code [Taiga #1437](https://tree.taiga.io/project/penpot/issue/1437)
 - Fix shadows when exporting groups [Taiga #1495](https://tree.taiga.io/project/penpot/issue/1495)
+- Fix drag-select when renaming layer text [Taiga #1307](https://tree.taiga.io/project/penpot/issue/1307)
 
 
 ### :arrow_up: Deps updates

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

@@ -14,6 +14,7 @@
    [app.common.spec :as us]
    [app.main.data.shortcuts :refer [bind-shortcuts]]
    [app.util.dom :as dom]
+   [app.util.object :as obj]
    [app.util.dom.dnd :as dnd]
    [app.util.logging :as log]
    [app.util.timers :as ts]
@@ -97,7 +98,7 @@
 ;; things go weird.
 
 (defn use-sortable
-  [& {:keys [data-type data on-drop on-drag on-hold detect-center?] :as opts}]
+  [& {:keys [data-type data on-drop on-drag on-hold disabled detect-center?] :as opts}]
   (let [ref   (mf/use-ref)
         state (mf/use-state {:over nil
                              :timer nil
@@ -125,13 +126,16 @@
 
         on-drag-start
         (fn [event]
+          (if disabled
+            (dom/prevent-default event)
+            (let [target (dom/get-target event)]
               (dom/stop-propagation event)
               ;; (dnd/trace event data "drag-start")
               (dnd/set-data! event data-type data)
               (dnd/set-drag-image! event (invisible-image))
               (dnd/set-allowed-effect! event "move")
               (when (fn? on-drag)
-            (on-drag data)))
+                (on-drag data)))))
 
         on-drag-enter
         (fn [event]

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

@@ -54,31 +54,25 @@
   (l/derived (l/in [:workspace-local :shape-for-rename]) st/state))
 
 (mf/defc layer-name
-  [{:keys [shape] :as props}]
+  [{:keys [shape on-start-edit on-stop-edit] :as props}]
   (let [local            (mf/use-state {})
         shape-for-rename (mf/deref shape-for-rename-ref)
         name-ref         (mf/use-ref)
 
-        set-draggable (fn [value]
-                        (let [parent (.. (mf/ref-val name-ref)
-                                         -parentNode
-                                         -parentNode)]
-                          (set! (.-draggable parent) value)))
-
         start-edit (fn []
-                     (set-draggable false)
+                     (on-start-edit)
                      (swap! local assoc :edition true))
 
         accept-edit (fn []
                       (let [name-input (mf/ref-val name-ref)
                             name       (dom/get-value name-input)]
-                        (set-draggable true)
+                        (on-stop-edit)
                         (swap! local assoc :edition false)
                         (st/emit! (dw/end-rename-shape)
                                   (dw/update-shape (:id shape) {:name name}))))
 
         cancel-edit (fn []
-                      (set-draggable true)
+                      (on-stop-edit)
                       (swap! local assoc :edition false)
                       (st/emit! (dw/end-rename-shape)))
 
@@ -124,6 +118,8 @@
         selected? (contains? selected id)
         container? (or (= (:type item) :frame) (= (:type item) :group))
 
+        disable-drag (mf/use-state false)
+
         expanded-iref (mf/use-memo
                         (mf/deps id)
                         (make-collapsed-iref id))
@@ -203,6 +199,7 @@
                        :on-drop on-drop
                        :on-drag on-drag
                        :on-hold on-hold
+                       :disabled @disable-drag
                        :detect-center? container?
                        :data {:id (:id item)
                               :index index
@@ -229,7 +226,9 @@
                               :on-click select-shape
                               :on-double-click #(dom/stop-propagation %)}
       [:& element-icon {:shape item}]
-      [:& layer-name {:shape item}]
+      [:& layer-name {:shape item
+                      :on-start-edit #(reset! disable-drag true)
+                      :on-stop-edit #(reset! disable-drag false)}]
 
       [:div.element-actions
        [:div.toggle-element {:class (when (:hidden item) "selected")