teutat3s/elk
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
Joaquín Sánchez 2023-02-03 11:48:27 +01:00 committed by GitHub
parent 4b1b18768d
commit 4fc468539e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
components/list/Account.vue
View file

@ -36,7 +36,11 @@ async function edit() {
:to="getAccountRoute(account)" :to="getAccountRoute(account)"
/> />
<div> <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 <button
text-sm p2 border-1 transition-colors text-sm p2 border-1 transition-colors
border-dark border-dark

10
components/list/ListEntry.vue
View file

@ -87,13 +87,13 @@ onBeforeUnmount(() => cancelEdit(false))
</script> </script>
<template> <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 <div
v-if="isEditing" v-if="isEditing"
bg-base border="~ base" h10 m2 ps-1 pe-4 rounded-3 w-full flex="~ row" 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 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 <button
type="button" type="button"
rounded-full text-sm p2 transition-colors rounded-full text-sm p2 transition-colors
@ -121,7 +121,7 @@ onBeforeUnmount(() => cancelEdit(false))
{{ list.title }} {{ list.title }}
</NuxtLink> </NuxtLink>
<div mr4 flex gap2> <div mr4 flex gap2>
<CommonTooltip v-if="isEditing" :content="$t('list.save')"> <CommonTooltip v-if="isEditing" :content="$t('list.save')" no-auto-focus>
<button <button
type="submit" type="submit"
text-sm p2 border-1 transition-colors text-sm p2 border-1 transition-colors
@ -137,7 +137,7 @@ onBeforeUnmount(() => cancelEdit(false))
</template> </template>
</button> </button>
</CommonTooltip> </CommonTooltip>
<CommonTooltip v-else :content="$t('list.edit')"> <CommonTooltip v-else :content="$t('list.edit')" no-auto-focus>
<button <button
ref="edit" ref="edit"
type="button" type="button"
@ -149,7 +149,7 @@ onBeforeUnmount(() => cancelEdit(false))
<span block text-current i-ri:edit-2-line class="rtl-flip" /> <span block text-current i-ri:edit-2-line class="rtl-flip" />
</button> </button>
</CommonTooltip> </CommonTooltip>
<CommonTooltip :content="$t('list.delete')"> <CommonTooltip :content="$t('list.delete')" no-auto-focus>
<button <button
type="button" type="button"
text-sm p2 border-1 transition-colors text-sm p2 border-1 transition-colors