From 4fc468539e4d10b95cc16e20575f1f1a4ba5dc14 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez?= <userquin@gmail.com>
Date: Fri, 3 Feb 2023 11:48:27 +0100
Subject: [PATCH] fix(lists): focus lost when focusing buttons (#1591)

---
 components/list/Account.vue   |  6 +++++-
 components/list/ListEntry.vue | 10 +++++-----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/components/list/Account.vue b/components/list/Account.vue
index c2f0560f..9be4e820 100644
--- 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
index 4202b3c3..e36e7f56 100644
--- 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