fix: issue 1366 (#1382)

components/common/dropdown/DropdownItem.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
-const props = defineProps<{
+const props = withDefaults(defineProps<{
+  is?: string
   text?: string
   description?: string
   icon?: string
   checked?: boolean
   command?: boolean
-}>()
+}>(), {
+  is: 'div',
+})
 const emit = defineEmits(['click'])
 
 const { hide } = useDropdownContext() || {}
@@ -39,8 +42,10 @@ useCommand({
 </script>
 
 <template>
-  <div
+  <component
-    v-bind="$attrs" ref="el"
+    v-bind="$attrs"
+    :is="is"
+    ref="el"
     flex gap-3 items-center cursor-pointer px4 py3
     select-none
     hover-bg-active
@@ -67,5 +72,5 @@ useCommand({
 
     <div v-if="checked" i-ri:check-line />
     <slot name="actions" />
-  </div>
+  </component>
 </template>

components/user/UserSwitcher.vue

@@ -39,11 +39,13 @@ const clickUser = (user: UserLogin) => {
     </template>
     <div border="t base" pt2>
       <CommonDropdownItem
+        is="button"
         :text="$t('user.add_existing')"
         icon="i-ri:user-add-line"
         @click="openSigninDialog"
       />
       <CommonDropdownItem
+        is="button"
         v-if="isHydrated && currentUser"
         :text="$t('user.sign_out_account', [getFullHandle(currentUser.account)])"
         icon="i-ri:logout-box-line rtl-flip"