🐛 Fix unable to finish the create account form using keyboard

CHANGES.md

@@ -33,6 +33,7 @@
 - Fix boolean operators in menu for boards [Taiga #13174](https://tree.taiga.io/project/penpot/issue/13174)
 - Fix viewer can update library [Taiga #13186](https://tree.taiga.io/project/penpot/issue/13186)
 - Fix remove fill affects different element than selected [Taiga #13128](https://tree.taiga.io/project/penpot/issue/13128)
+- Fix unable to finish the create account form using keyboard [Taiga #11333](https://tree.taiga.io/project/penpot/issue/11333)
 
 ## 2.13.0
 

frontend/src/app/main/data/workspace/shortcuts.cljs

@@ -316,7 +316,7 @@
    :insert-image         {:tooltip (ds/shift "K")
                           :command "shift+k"
                           :subsections [:tools]
-                          :fn #(-> "image-upload" dom/get-element dom/click)}
+                          :fn #(-> "image-upload" dom/get-element dom/click!)}
 
    :toggle-visibility    {:tooltip (ds/meta-shift "H")
                           :command (ds/c-mod "shift+h")

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

@@ -32,6 +32,7 @@
         input-name   (get props :name)
         more-classes (get props :class)
         auto-focus?  (get props :auto-focus? false)
+        input-ref    (mf/use-ref nil)
 
         data-testid  (d/nilv data-testid input-name)
 
@@ -82,7 +83,6 @@
                       (swap! form assoc-in [:touched input-name] true)
                       (fm/on-input-change form input-name value trim)
                       (on-change-value name value)))
-
         on-blur
         (fn [_]
           (reset! focus? false))
@@ -92,9 +92,18 @@
           (when-not (get-in @form [:touched input-name])
             (swap! form assoc-in [:touched input-name] true)))
 
+        on-key-press
+        (mf/use-fn
+         (mf/deps input-ref)
+         (fn [e]
+           (dom/prevent-default e)
+           (when (kbd/space? e)
+             (dom/click! (mf/ref-val input-ref)))))
+
         props (-> props
                   (dissoc :help-icon :form :trim :children :show-success? :auto-focus? :label)
                   (assoc :id (name input-name)
+                         :ref input-ref
                          :value value
                          :auto-focus auto-focus?
                          :on-click (when (or is-radio? is-checkbox?) on-click)
@@ -131,7 +140,7 @@
                  :for (name input-name)} label
 
          (when is-checkbox?
-           [:span {:class (stl/css-case :global/checked checked?)} (when checked? deprecated-icon/status-tick)])
+           [:span {:class (stl/css-case :global/checked checked?) :tab-index "0" :on-key-press on-key-press} (when checked? deprecated-icon/status-tick)])
 
          (if is-checkbox?
            [:> :input props]

frontend/src/app/main/ui/dashboard/fonts.cljs

@@ -94,7 +94,7 @@
         (some :height-warning? (vals fonts))
 
         on-click
-        (mf/use-fn #(dom/click (mf/ref-val input-ref)))
+        (mf/use-fn #(dom/click! (mf/ref-val input-ref)))
 
         on-selected
         (mf/use-fn

frontend/src/app/main/ui/dashboard/placeholder.cljs

@@ -33,7 +33,7 @@
            (dom/open-new-window "https://penpot.app/penpothub/libraries-templates")))
 
         on-import
-        (mf/use-fn #(dom/click (mf/ref-val file-input)))]
+        (mf/use-fn #(dom/click! (mf/ref-val file-input)))]
 
     [:div {:class (stl/css :empty-project-container)}
      [:div {:class (stl/css :empty-project-card)

frontend/src/app/main/ui/dashboard/team.cljs

@@ -1286,7 +1286,7 @@
                         (:is-admin permissions))
 
         on-image-click
-        (mf/use-fn #(dom/click (mf/ref-val finput)))
+        (mf/use-fn #(dom/click! (mf/ref-val finput)))
 
         on-file-selected
         (fn [file]

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

@@ -55,7 +55,7 @@
                  label  (dom/get-parent-with-data target "label")]
              (dom/prevent-default event)
              (dom/stop-propagation event)
-             (dom/click label))))
+             (dom/click! label))))
 
         handle-change
         (mf/use-fn

frontend/src/app/main/ui/settings/profile.cljs

@@ -99,7 +99,7 @@
 
         on-image-click
         (mf/use-fn
-         #(dom/click (mf/ref-val input-ref)))
+         #(dom/click! (mf/ref-val input-ref)))
 
         on-file-selected
         (fn [file]

frontend/src/app/main/ui/workspace/colorpicker.cljs

@@ -158,7 +158,7 @@
                       (not drag?)))))
 
         on-fill-image-click
-        (mf/use-fn #(dom/click (mf/ref-val fill-image-ref)))
+        (mf/use-fn #(dom/click! (mf/ref-val fill-image-ref)))
 
         on-fill-image-selected
         (mf/use-fn

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

@@ -364,7 +364,7 @@
         (mf/use-fn
          (fn []
            (st/emit! (dw/set-assets-section-open file-id :components true))
-           (dom/click (mf/ref-val input-ref))))
+           (dom/click! (mf/ref-val input-ref))))
 
         on-file-selected
         (mf/use-fn

frontend/src/app/main/ui/workspace/tokens/import/modal.cljs

@@ -139,13 +139,13 @@
         zip-input-ref (mf/use-ref)
 
         on-display-file-explorer
-        (mf/use-fn #(dom/click (mf/ref-val file-input-ref)))
+        (mf/use-fn #(dom/click! (mf/ref-val file-input-ref)))
 
         on-display-dir-explorer
-        (mf/use-fn #(dom/click (mf/ref-val dir-input-ref)))
+        (mf/use-fn #(dom/click! (mf/ref-val dir-input-ref)))
 
         on-display-zip-explorer
-        (mf/use-fn #(dom/click (mf/ref-val zip-input-ref)))
+        (mf/use-fn #(dom/click! (mf/ref-val zip-input-ref)))
 
         handle-import-action
         (mf/use-fn

frontend/src/app/main/ui/workspace/top_toolbar.cljs

@@ -38,7 +38,7 @@
         (mf/use-fn
          (fn []
            (st/emit! :interrupt (dw/clear-edition-mode))
-           (dom/click (mf/ref-val ref))))
+           (dom/click! (mf/ref-val ref))))
 
         on-selected
         (mf/use-fn

frontend/src/app/util/dom.cljs

@@ -230,12 +230,6 @@
 
 (def get-target-scroll (comp get-scroll-position get-target))
 
-(defn click
-  "Click a node"
-  [^js node]
-  (when (some? node)
-    (.click node)))
-
 (defn get-files
   "Extract the files from dom node."
   [^js node]
@@ -480,7 +474,6 @@
   [^js node]
   (when (some? node)
     (.click node)))
-
 (defn focus?
   [^js node]
   (and node