🐛 Fix input confirmation behavior is not uniform

CHANGES.md

@@ -25,6 +25,7 @@
 - Fix search shortcut [Taiga #10265](https://tree.taiga.io/project/penpot/issue/10265)
 - Fix shortcut conflict in text editor (increase/decrease font size vs word selection)
 - Fix problem with plugins generating code for pages different than current one [Taiga #12312](https://tree.taiga.io/project/penpot/issue/12312)
+- Fix input confirmation behavior is not uniform [Taiga #12294](https://tree.taiga.io/project/penpot/issue/12294)
 
 ## 2.11.0 (Unreleased)
 

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

@@ -70,7 +70,7 @@
                :default-value value
                :on-key-up on-key-up
                :max-length max-input-length
-               :on-blur cancel-edition}]
+               :on-blur accept-edition}]
 
       [:span {:class [(stl/css :editable-label-text) class-label]
               :title tooltip}

frontend/src/app/main/ui/ds/controls/combobox.cljs

@@ -202,7 +202,9 @@
                            dom/get-value)]
              (reset! selected-id* value)
              (reset! filter-id* value)
-             (reset! focused-id* nil))))
+             (reset! focused-id* nil)
+             (when (fn? on-change)
+               (on-change value)))))
 
         selected-option
         (mf/with-memo [options selected-id]

frontend/src/app/main/ui/ds/product/input_with_meta.cljs

@@ -25,20 +25,25 @@
 (mf/defc input-with-meta*
   {::mf/schema schema:input-with-meta}
   [{:keys [value meta max-length is-editing on-blur] :rest props}]
-  (let [editing*  (mf/use-state (d/nilv is-editing false))
+  (let [title       (if meta (str value ": " meta) value)
+        editing*    (mf/use-state (d/nilv is-editing false))
         editing?    (deref editing*)
-
         input-ref   (mf/use-ref)
-        input     (mf/ref-val input-ref)
+        last-node*  (mf/use-ref nil)
 
-        title     (if meta (str value ": " meta) value)
+        ref-cb      (mf/use-fn
+                     (fn [node]
+                       ;; We need to keep the last not-null node for cleanup
+                       (mf/set-ref-val! input-ref node)
+                       (when node
+                         (mf/set-ref-val! last-node* node))))
 
         on-edit
         (mf/use-fn
          (fn [event]
            (dom/stop-propagation event)
            (reset! editing* true)
-           (dom/focus! input)))
+           (dom/focus! (mf/ref-val input-ref))))
 
         on-stop-edit
         (mf/use-fn
@@ -64,7 +69,7 @@
              (when ^boolean enter? (dom/blur! node))
              (when ^boolean esc? (dom/blur! node)))))
 
-        props (mf/spread-props props {:ref input-ref
+        props (mf/spread-props props {:ref ref-cb
                                       :default-value value
                                       :max-length (d/nilv max-length max-input-length)
                                       :auto-focus true
@@ -72,6 +77,18 @@
                                       :on-blur on-stop-edit
                                       :on-key-down handle-key-down})]
 
+    ;; Cleanup: Simulate a blur event
+    (mf/with-effect [on-blur last-node*]
+      (fn []
+        (let [input (mf/ref-val last-node*)
+              fake-blur-event #js {:type              "blur"
+                                   :target            input
+                                   :currentTarget     input
+                                   :stopPropagation   (fn [])
+                                   :preventDefault    (fn [])}]
+          (when input
+            (on-blur fake-blur-event)))))
+
     (if editing?
       [:div {:class (stl/css :input-with-meta-edit-container)}
        [:> input* props]]