fix(lists): focus lost when focusing buttons (#1591)

elk-zone · Feb 3, 2023 · 4fc4685 · 4fc4685
1 parent 4b1b187
commit 4fc4685
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git a/components/list/Account.vue b/components/list/Account.vue
@@ -36,7 +36,11 @@ async function edit() {
       :to="getAccountRoute(account)"
     />
     <div>
-      <CommonTooltip :content="isRemoved ? $t('list.add_account') : $t('list.remove_account')" :hover="isRemoved ? 'text-green' : 'text-red'">
+      <CommonTooltip
+        :content="isRemoved ? $t('list.add_account') : $t('list.remove_account')"
+        :hover="isRemoved ? 'text-green' : 'text-red'"
+        no-auto-focus
+      >
         <button
           text-sm p2 border-1 transition-colors
           border-dark

diff --git a/components/list/ListEntry.vue b/components/list/ListEntry.vue
@@ -87,13 +87,13 @@ onBeforeUnmount(() => cancelEdit(false))
 </script>
 
 <template>
-  <form hover:bg-active flex justify-between items-center @submit.prevent="finishEditing">
+  <form hover:bg-active flex justify-between items-center gap-x-2 @submit.prevent="finishEditing">
     <div
       v-if="isEditing"
       bg-base border="~ base" h10 m2 ps-1 pe-4 rounded-3 w-full flex="~ row"
       items-center relative focus-within:box-shadow-outline gap-3
     >
-      <CommonTooltip v-if="isEditing" :content="$t('list.cancel_edit')">
+      <CommonTooltip v-if="isEditing" :content="$t('list.cancel_edit')" no-auto-focus>
         <button
           type="button"
           rounded-full text-sm p2 transition-colors
@@ -121,7 +121,7 @@ onBeforeUnmount(() => cancelEdit(false))
       {{ list.title }}
     </NuxtLink>
     <div mr4 flex gap2>
-      <CommonTooltip v-if="isEditing" :content="$t('list.save')">
+      <CommonTooltip v-if="isEditing" :content="$t('list.save')" no-auto-focus>
         <button
           type="submit"
           text-sm p2 border-1 transition-colors
@@ -137,7 +137,7 @@ onBeforeUnmount(() => cancelEdit(false))
           </template>
         </button>
       </CommonTooltip>
-      <CommonTooltip v-else :content="$t('list.edit')">
+      <CommonTooltip v-else :content="$t('list.edit')" no-auto-focus>
         <button
           ref="edit"
           type="button"
@@ -149,7 +149,7 @@ onBeforeUnmount(() => cancelEdit(false))
           <span block text-current i-ri:edit-2-line class="rtl-flip" />
         </button>
       </CommonTooltip>
-      <CommonTooltip :content="$t('list.delete')">
+      <CommonTooltip :content="$t('list.delete')" no-auto-focus>
         <button
           type="button"
           text-sm p2 border-1 transition-colors