Merge pull request #7634 from penpot/alotor-fix-editable-label

🐛 Fix problem with certain text input and drag/drop

CHANGES.md

@@ -70,6 +70,7 @@
 - Fix library update notificacions showing when they should not [Taiga #12397](https://tree.taiga.io/project/penpot/issue/12397)
 - Fix remove flex button doesn’t work within variant [Taiga #12314](https://tree.taiga.io/project/penpot/issue/12314)
 - Fix an error translation [Taiga #12402](https://tree.taiga.io/project/penpot/issue/12402)
+- Fix problem with certain text input in some editable labels (pages, components, tokens...) being in conflict with the drag/drop functionality [Taiga #12316](https://tree.taiga.io/project/penpot/issue/12316)
 
 ## 2.10.1
 

frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs

@@ -169,9 +169,9 @@
 
         on-color-drag-start
         (mf/use-fn
-         (mf/deps color file-id selected item-ref read-only?)
+         (mf/deps color file-id selected item-ref read-only? editing?)
          (fn [event]
-           (if read-only?
+           (if (or read-only? editing?)
              (dom/prevent-default event)
              (cmm/on-asset-drag-start event file-id color selected item-ref :colors identity))))
 

frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs

@@ -65,6 +65,7 @@
         component-id   (:id component)
 
         visible?       (h/use-visible item-ref :once? true)
+        renaming?      (= renaming (:id component))
 
         ;; NOTE: we don't use reactive deref for it because we don't
         ;; really need rerender on any change on the file change. If
@@ -82,12 +83,13 @@
 
         on-component-double-click
         (mf/use-fn
-         (mf/deps file-id component is-local)
+         (mf/deps file-id component is-local renaming?)
          (fn [event]
            (dom/stop-propagation event)
-           (if is-local
-             (st/emit! (dwl/go-to-local-component :id component-id))
-             (st/emit! (dwl/go-to-component-file file-id component false)))))
+           (when-not renaming?
+             (if is-local
+               (st/emit! (dwl/go-to-local-component :id component-id))
+               (st/emit! (dwl/go-to-component-file file-id component false))))))
 
         on-drop
         (mf/use-fn
@@ -113,18 +115,16 @@
 
         on-component-drag-start
         (mf/use-fn
-         (mf/deps file-id component selected item-ref on-drag-start read-only? is-local)
+         (mf/deps file-id component selected item-ref on-drag-start read-only? renaming? is-local)
          (fn [event]
-           (if read-only?
+           (if (or read-only? renaming?)
              (dom/prevent-default event)
              (cmm/on-asset-drag-start event file-id component selected item-ref :components on-drag-start))))
 
         on-context-menu
         (mf/use-fn
          (mf/deps on-context-menu component-id)
-         (partial on-context-menu component-id))
-
-        renaming? (= renaming (:id component))]
+         (partial on-context-menu component-id))]
 
     [:div {:ref item-ref
            :class (stl/css-case :component-item true

frontend/src/app/main/ui/workspace/sidebar/assets/typographies.cljs

@@ -76,9 +76,9 @@
 
         on-typography-drag-start
         (mf/use-fn
-         (mf/deps typography file-id selected item-ref read-only?)
+         (mf/deps typography file-id selected item-ref read-only? renaming? open?)
          (fn [event]
-           (if read-only?
+           (if (or read-only? renaming? open?)
              (dom/prevent-default event)
              (cmm/on-asset-drag-start event file-id typography selected item-ref :typographies identity))))
 

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

@@ -113,7 +113,7 @@
          :data {:id id
                 :index index
                 :name (:name page)}
-         :draggable? (not read-only?))
+         :draggable? (and (not read-only?) (not editing?)))
 
         on-context-menu
         (mf/use-fn

frontend/src/app/main/ui/workspace/tokens/sets/lists.cljs

@@ -162,7 +162,7 @@
          :data {:index index
                 :is-group true}
          :detect-center? true
-         :draggable? is-draggable)]
+         :draggable? (and is-draggable (not is-editing)))]
 
     [:div {:ref dref
            :data-testid "tokens-set-group-item"
@@ -271,7 +271,7 @@
          :on-drop on-drop
          :data {:index index
                 :is-group false}
-         :draggable? is-draggable)
+         :draggable? (and is-draggable (not is-editing)))
 
         drop-over
         (get dprops :over)]