From 4ea5d8ba603684e1b2b07e6e03ef79d249631c15 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= <sxzz@sxzz.moe>
Date: Tue, 3 Jan 2023 18:13:48 +0800
Subject: [PATCH] fix(settings): don't submit when clicking icon buttons

---
 components/settings/SettingsProfileMetadata.vue | 6 +++---
 pages/settings/profile/appearance.vue           | 3 +++
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/components/settings/SettingsProfileMetadata.vue b/components/settings/SettingsProfileMetadata.vue
index 525dbcdb..6abafb4b 100644
--- a/components/settings/SettingsProfileMetadata.vue
+++ b/components/settings/SettingsProfileMetadata.vue
@@ -25,7 +25,7 @@ const chooseIcon = (i: number, text: string) => {
     <div v-for="i in 4" :key="i" flex="~ gap3" items-center>
       <CommonDropdown ref="dropdown" placement="left">
         <CommonTooltip content="Pick a icon">
-          <button btn-action-icon>
+          <button type="button" btn-action-icon>
             <div :class="fieldIcons[i - 1] || 'i-ri:question-mark'" />
           </button>
         </CommonTooltip>
@@ -37,9 +37,9 @@ const chooseIcon = (i: number, text: string) => {
               :content="text"
             >
               <template v-if="text !== 'Joined'">
-                <div btn-action-icon @click="chooseIcon(i - 1, text)">
+                <button type="button" btn-action-icon @click="chooseIcon(i - 1, text)">
                   <div text-xl :class="icon" />
-                </div>
+                </button>
               </template>
             </CommonTooltip>
           </div>
diff --git a/pages/settings/profile/appearance.vue b/pages/settings/profile/appearance.vue
index cd9049b2..82442c93 100644
--- a/pages/settings/profile/appearance.vue
+++ b/pages/settings/profile/appearance.vue
@@ -54,6 +54,9 @@ onMastoInit(async () => {
 const isCanSubmit = computed(() => !isError.value && !isEmptyObject(dirtyFields.value))
 
 const { submit, submitting } = submitter(async ({ dirtyFields }) => {
+  if (!isCanSubmit.value)
+    return
+
   const res = await useMasto().accounts.updateCredentials(dirtyFields.value as UpdateCredentialsParams)
     .then(account => ({ account }))
     .catch((error: Error) => ({ error }))