🐛 Fix ctrl+z in workspace select issue

2025-03-25 06:01:46 -05:00 · 2023-07-26 14:16:01 +02:00 · 2023-07-26 14:16:01 +02:00 · f1cf5d8ba8
commit f1cf5d8ba8
parent cc682a382f
10 changed files with 37 additions and 20 deletions
--- a/CHANGES.md
+++ b/CHANGES.md
@ -97,6 +97,7 @@
 - Fix 400 error when user changes password [Taiga #5643](https://tree.taiga.io/project/penpot/issue/5643)
 - Fix cannot undo layer styles [Taiga #5676](https://tree.taiga.io/project/penpot/issue/5676)
 - Fix unexpected exception on boolean shapes [Taiga #5685](https://tree.taiga.io/project/penpot/issue/5685)
+- Fix ctrl+z on select not working [Taiga #5677](https://tree.taiga.io/project/penpot/issue/5677)

 ### :arrow_up: Deps updates

--- a/frontend/src/app/main/data/shortcuts_impl.js
+++ b/frontend/src/app/main/data/shortcuts_impl.js
@ -17,17 +17,20 @@ if (Mousetrap.addKeycodes) {

 const target = Mousetrap.prototype || Mousetrap;
 target.stopCallback = function(e, element, combo) {
-  // if the element has the class "mousetrap" then no need to stop
-  if ((' ' + element.className + ' ').indexOf(' mousetrap ') > -1) {
-      return false;
+  // if the element has the data attribute "mousetrap-dont-stop" then no need
+  // to stop. It should be used like <div data-mousetrap-dont-stop>...</div>
+  // or :div {:data-mousetrap-dont-stop true}
+  if ('mousetrapDontStop' in element.dataset) {
+    return false
  }

  // stop for input, select, textarea and button
-  return element.tagName == 'INPUT' || 
-         element.tagName == 'SELECT' || 
-         element.tagName == 'TEXTAREA' || 
-         (element.tagName == 'BUTTON' && combo.includes("tab")) ||
-         (element.contentEditable && element.contentEditable == 'true');
+  const shouldStop = element.tagName == "INPUT" ||
+    element.tagName == "SELECT" ||
+    element.tagName == "TEXTAREA" ||
+    (element.tagName == "BUTTON" && combo.includes("tab")) ||
+    (element.contentEditable && element.contentEditable == "true");
+  return shouldStop;
 }

 export default Mousetrap;
--- a/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs
+++ b/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs
@ -72,7 +72,9 @@
          (reset! current-colors (into [] (filter check-valid-color?) colors)))))

    [:div.libraries
-     [:select {:on-change on-library-change :value (name @selected)}
+     [:select {:data-mousetrap-dont-stop true ;; makes mousetrap to not stop at this element
+               :on-change on-library-change
+               :value (name @selected)}
      [:option {:value "recent"} (tr "workspace.libraries.colors.recent-colors")]
      [:option {:value "file"} (tr "workspace.libraries.colors.file-library")]

--- a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs
@ -2494,7 +2494,8 @@
           {:on-click on-search-clear-click}
           i/close])]

-       [:select.input-select {:value (:section filters)
+       [:select.input-select {:data-mousetrap-dont-stop true ;; makes mousetrap to not stop at this element
+                              :value (:section filters)
                              :on-change on-section-filter-change}
        [:option {:value ":all"} (tr "workspace.assets.box-filter-all")]
        [:option {:value ":components"} (tr "workspace.assets.components")]
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.cljs
@ -145,7 +145,8 @@
          [:div.constraints-form
           [:div.row-flex
            [:span.left-right i/full-screen]
-            [:select.input-select {:on-change (on-constraint-select-changed :constraints-h)
+            [:select.input-select {:data-mousetrap-dont-stop true ;; makes mousetrap to not stop at this element
+                                   :on-change (on-constraint-select-changed :constraints-h)
                                   :value (d/name constraints-h "scale")}
             (when (= constraints-h :multiple)
               [:option {:value ""} (tr "settings.multiple")])
@ -156,7 +157,8 @@
             [:option {:value "scale"} (tr "workspace.options.constraints.scale")]]]
           [:div.row-flex
            [:span.top-bottom i/full-screen]
-            [:select.input-select {:on-change (on-constraint-select-changed :constraints-v)
+            [:select.input-select {:data-mousetrap-dont-stop true ;; makes mousetrap to not stop at this element
+                                   :on-change (on-constraint-select-changed :constraints-v)
                                   :value (d/name constraints-v "scale")}
             (when (= constraints-v :multiple)
               [:option {:value ""} (tr "settings.multiple")])
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs
@ -169,7 +169,8 @@
          [:div.element-set-options-group
           {:key index}
           (when (scale-enabled? export)
-             [:select.input-select {:on-change (partial on-scale-change index)
+             [:select.input-select {:data-mousetrap-dont-stop true ;; makes mousetrap to not stop at this element
+                                    :on-change (partial on-scale-change index)
                                    :value (:scale export)}
              [:option {:value "0.5"}  "0.5x"]
              [:option {:value "0.75"} "0.75x"]
@ -182,7 +183,8 @@
                               :placeholder (tr "workspace.options.export.suffix")
                               :on-change (partial on-suffix-change index)
                               :on-key-down manage-key-down}]
-           [:select.input-select {:value (d/name (:type export))
+           [:select.input-select {:data-mousetrap-dont-stop true ;; makes mousetrap to not stop at this element
+                                  :value (d/name (:type export))
                                  :on-change (partial on-type-change index)}
            [:option {:value "png"} "PNG"]
            [:option {:value "jpeg"} "JPEG"]
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs
@ -139,7 +139,8 @@
        i/actions]

       [:select.input-select
-        {:default-value shadow-style
+        {:data-mousetrap-dont-stop true ;; makes mousetrap to not stop at this element
+         :default-value shadow-style
         :on-change (fn [event]
                      (let [value (-> event dom/get-target dom/get-value d/read-string)]
                        (st/emit! (dch/update-shapes ids #(assoc-in % [:shadow index :style] value)))))}
@ -165,7 +166,8 @@
         {:on-click on-toggle-open-shadow}
         i/actions]
        [:select.input-select
-         {:default-value shadow-style
+         {:data-mousetrap-dont-stop true ;; makes mousetrap to not stop at this element
+          :default-value shadow-style
          :on-change (fn [event]
                       (let [value (-> event dom/get-target dom/get-value d/read-string)]
                         (st/emit! (dch/update-shapes ids #(assoc-in % [:shadow index :style] value)))))}
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs
@ -350,7 +350,8 @@
          :on-blur on-blur}])

      [:select.input-select.variant-option
-       {:disabled (= font-id :multiple)
+       {:data-mousetrap-dont-stop true ;; makes mousetrap to not stop at this element
+        :disabled (= font-id :multiple)
        :value (attr->string font-variant-id)
        :on-change on-font-variant-change
        :on-blur on-blur}
--- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/input_row.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/input_row.cljs
@ -19,7 +19,8 @@

    (case type
      :select
-      [:& select {:default-value value
+      [:& select {:data-mousetrap-dont-stop true ;; makes mousetrap to not stop at this element
+                  :default-value value
                  :class "input-option"
                  :options options
                  :on-change on-change}]
--- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs
@ -106,7 +106,8 @@
         :data-select-on-focus data-select-on-focus
         :on-blur on-blur}]]

-      [:select#style.input-select {:value (enum->string (:stroke-alignment stroke))
+      [:select#style.input-select {:data-mousetrap-dont-stop true ;; makes mousetrap to not stop at this element
+                                   :value (enum->string (:stroke-alignment stroke))
                                   :on-change (on-stroke-alignment-change index)}
       (when (= (:stroke-alignment stroke) :multiple)
         [:option {:value ""} "--"])
@ -115,7 +116,8 @@
       [:option {:value ":outer"} (tr "workspace.options.stroke.outer")]]

      (when-not disable-stroke-style
-        [:select#style.input-select {:value (enum->string (:stroke-style stroke))
+        [:select#style.input-select {:data-mousetrap-dont-stop true ;; makes mousetrap to not stop at this element
+                                     :value (enum->string (:stroke-style stroke))
                                     :on-change (on-stroke-style-change index)}
         (when (= (:stroke-style stroke) :multiple)
           [:option {:value ""} "--"])