From 3fd976c551470bd4190ae6dad11045b607fd46c4 Mon Sep 17 00:00:00 2001
From: Dexterity <173429049+Dexterity104@users.noreply.github.com>
Date: Wed, 22 Apr 2026 09:21:02 -0400
Subject: [PATCH] :bug: Fix UI bugs in account settings forms (#8997)

Closes #8977
Closes #8979

Signed-off-by: Dexterity <173429049+Dexterity104@users.noreply.github.com>
Co-authored-by: Andrey Antukh <niwi@niwi.nz>
---
 CHANGES.md                                     |  2 ++
 frontend/src/app/main/ui/components/forms.cljs | 14 +++++++++++++-
 frontend/src/app/main/ui/components/forms.scss |  3 +++
 frontend/src/app/main/ui/settings/profile.cljs |  9 ++++-----
 4 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/CHANGES.md b/CHANGES.md
index 4f71cbe20f..794b299461 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -70,6 +70,8 @@
 - Fix app crash when selecting shapes with one hidden [Taiga #13959](https://tree.taiga.io/project/penpot/issue/13959)
 - Fix opacity mixed value [Taiga #13960](https://tree.taiga.io/project/penpot/issue/13960)
 - Fix gap input throwing an error [Github #8984](https://github.com/penpot/penpot/pull/8984)
+- Fix non-functional clear icon in change email modal inputs (by @Dexterity104) [Github #8977](https://github.com/penpot/penpot/issues/8977)
+- Disable save button after saving account profile settings (by @Dexterity104) [Github #8979](https://github.com/penpot/penpot/issues/8979)
 - Fix copy to be more specific [Taiga #13990](https://tree.taiga.io/project/penpot/issue/13990)
 - Allow deleting the profile avatar after uploading [Github #9067](https://github.com/penpot/penpot/issues/9067)
 - Fix incorrect rendering when exporting text as SVG, PNG and JPG (by @edwin-rivera-dev) [Github #8516](https://github.com/penpot/penpot/issues/8516)
diff --git a/frontend/src/app/main/ui/components/forms.cljs b/frontend/src/app/main/ui/components/forms.cljs
index e2bb4cd5cf..17a1708196 100644
--- a/frontend/src/app/main/ui/components/forms.cljs
+++ b/frontend/src/app/main/ui/components/forms.cljs
@@ -92,6 +92,15 @@
           (when-not (get-in @form [:touched input-name])
             (swap! form assoc-in [:touched input-name] true)))
 
+        on-clear
+        (fn [event]
+          (dom/prevent-default event)
+          (swap! form (fn [state]
+                        (-> state
+                            (assoc-in [:data input-name] "")
+                            (assoc-in [:touched input-name] false))))
+          (some-> (mf/ref-val input-ref) (dom/focus!)))
+
         on-key-press
         (mf/use-fn
          (mf/deps input-ref)
@@ -158,7 +167,10 @@
                deprecated-icon/tick])
 
             (when show-invalid?
-              [:span {:class (stl/css :invalid-icon)}
+              [:button {:class (stl/css :invalid-icon)
+                        :type "button"
+                        :tab-index "-1"
+                        :on-click on-clear}
                deprecated-icon/close])])]
 
         (some? children)
diff --git a/frontend/src/app/main/ui/components/forms.scss b/frontend/src/app/main/ui/components/forms.scss
index 2242c66868..a8705671c6 100644
--- a/frontend/src/app/main/ui/components/forms.scss
+++ b/frontend/src/app/main/ui/components/forms.scss
@@ -123,6 +123,8 @@
 .invalid-icon {
   inline-size: $sz-16;
   block-size: $sz-16;
+  padding: 0;
+  border: none;
   background: var(--input-border-color-error);
   border-radius: $br-circle;
   display: flex;
@@ -131,6 +133,7 @@
   position: absolute;
   inset-inline-end: var(--input-icon-padding);
   inset-block-start: calc(50% - var(--sp-s));
+  cursor: pointer;
 
   svg {
     inline-size: $sz-12;
diff --git a/frontend/src/app/main/ui/settings/profile.cljs b/frontend/src/app/main/ui/settings/profile.cljs
index be2665337d..b8903d4027 100644
--- a/frontend/src/app/main/ui/settings/profile.cljs
+++ b/frontend/src/app/main/ui/settings/profile.cljs
@@ -26,13 +26,12 @@
    [:fullname [::sm/text {:max 250}]]
    [:email ::sm/email]])
 
-(defn- on-success
-  [_]
-  (st/emit! (ntf/success (tr "notifications.profile-saved"))))
-
 (defn- on-submit
   [form _event]
-  (let [data  (:clean-data @form)]
+  (let [data       (:clean-data @form)
+        on-success (fn [_]
+                     (swap! form assoc :touched {})
+                     (st/emit! (ntf/success (tr "notifications.profile-saved"))))]
     (st/emit! (du/update-profile data)
               (du/persist-profile {:on-success on-success}))))