From 0da50f482aba406dfd64ffd95c721f2fc3bcfaff Mon Sep 17 00:00:00 2001 From: Pablo Alba Date: Wed, 4 Feb 2026 17:47:39 +0100 Subject: [PATCH] :bug: Fix unable to finish the create account form using keyboard --- CHANGES.md | 1 + frontend/src/app/main/data/workspace/shortcuts.cljs | 2 +- frontend/src/app/main/ui/components/forms.cljs | 13 +++++++++++-- frontend/src/app/main/ui/dashboard/fonts.cljs | 2 +- frontend/src/app/main/ui/dashboard/placeholder.cljs | 2 +- frontend/src/app/main/ui/dashboard/team.cljs | 2 +- .../src/app/main/ui/ds/controls/radio_buttons.cljs | 2 +- frontend/src/app/main/ui/settings/profile.cljs | 2 +- frontend/src/app/main/ui/workspace/colorpicker.cljs | 2 +- .../ui/workspace/sidebar/assets/components.cljs | 2 +- .../app/main/ui/workspace/tokens/import/modal.cljs | 6 +++--- frontend/src/app/main/ui/workspace/top_toolbar.cljs | 2 +- frontend/src/app/util/dom.cljs | 7 ------- 13 files changed, 24 insertions(+), 21 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index af52bb58de..2cbc8bb1c8 100644 --- a/CHANGES.md +++ b/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 diff --git a/frontend/src/app/main/data/workspace/shortcuts.cljs b/frontend/src/app/main/data/workspace/shortcuts.cljs index 4f4d9296cc..a55573a58f 100644 --- a/frontend/src/app/main/data/workspace/shortcuts.cljs +++ b/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") diff --git a/frontend/src/app/main/ui/components/forms.cljs b/frontend/src/app/main/ui/components/forms.cljs index a4428e2aa5..331d2184f5 100644 --- a/frontend/src/app/main/ui/components/forms.cljs +++ b/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] diff --git a/frontend/src/app/main/ui/dashboard/fonts.cljs b/frontend/src/app/main/ui/dashboard/fonts.cljs index c1aa638671..0ce138e70f 100644 --- a/frontend/src/app/main/ui/dashboard/fonts.cljs +++ b/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 diff --git a/frontend/src/app/main/ui/dashboard/placeholder.cljs b/frontend/src/app/main/ui/dashboard/placeholder.cljs index bb32d71b5c..eb9c5a9c4e 100644 --- a/frontend/src/app/main/ui/dashboard/placeholder.cljs +++ b/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) diff --git a/frontend/src/app/main/ui/dashboard/team.cljs b/frontend/src/app/main/ui/dashboard/team.cljs index 51eab781b2..0507eb73f4 100644 --- a/frontend/src/app/main/ui/dashboard/team.cljs +++ b/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] diff --git a/frontend/src/app/main/ui/ds/controls/radio_buttons.cljs b/frontend/src/app/main/ui/ds/controls/radio_buttons.cljs index ea9dd6fff3..a55397d19c 100644 --- a/frontend/src/app/main/ui/ds/controls/radio_buttons.cljs +++ b/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 diff --git a/frontend/src/app/main/ui/settings/profile.cljs b/frontend/src/app/main/ui/settings/profile.cljs index 30855c2b00..e1c0975514 100644 --- a/frontend/src/app/main/ui/settings/profile.cljs +++ b/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] diff --git a/frontend/src/app/main/ui/workspace/colorpicker.cljs b/frontend/src/app/main/ui/workspace/colorpicker.cljs index 8abd50ba06..2ec2df3143 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker.cljs +++ b/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 diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs index 9aa485d5eb..fb79159411 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs +++ b/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 diff --git a/frontend/src/app/main/ui/workspace/tokens/import/modal.cljs b/frontend/src/app/main/ui/workspace/tokens/import/modal.cljs index 8e47009bbb..b5369894fa 100644 --- a/frontend/src/app/main/ui/workspace/tokens/import/modal.cljs +++ b/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 diff --git a/frontend/src/app/main/ui/workspace/top_toolbar.cljs b/frontend/src/app/main/ui/workspace/top_toolbar.cljs index 6fc3a09d4e..235b9c5570 100644 --- a/frontend/src/app/main/ui/workspace/top_toolbar.cljs +++ b/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 diff --git a/frontend/src/app/util/dom.cljs b/frontend/src/app/util/dom.cljs index ffa2b8f361..0b4ff3025a 100644 --- a/frontend/src/app/util/dom.cljs +++ b/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