github-starred/vikunja
2
0
Fork 0
mirror of https://github.com/go-vikunja/vikunja.git synced 2026-03-11 17:48:44 -05:00
Code Issues 219 Packages Projects Releases 2 Wiki Activity

fix(frontend): use rAF retry loop to focus quick entry input

Browse Source 
The previous approach using nextTick and window focus events didn't
work because the Modal transition (v-if + Transition appear) and the
Electron window visibility timing both prevent immediate focus. Use
requestAnimationFrame to retry until focus actually lands on the input.
This commit is contained in:
kolaente
2026-03-03 23:46:37 +01:00
parent d909b50989
commit 3c4804b6d4
1 changed files with 12 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/components/quick-actions/QuickActions.vue
View File

@@ -100,7 +100,7 @@
</template>
<script setup lang="ts">
import {type ComponentPublicInstance, computed, nextTick, ref, shallowReactive, watchEffect} from 'vue'
import {type ComponentPublicInstance, computed, ref, shallowReactive, watchEffect} from 'vue'
import {useQuickAddMode} from '@/composables/useQuickAddMode'
import {useI18n} from 'vue-i18n'
import {useRouter} from 'vue-router'
@@ -187,20 +187,18 @@ watchEffect(() => {
if (active.value && isQuickAddMode) {
selectedCmd.value = commands.value.newTask
// The Electron window may not be visible yet when Vue mounts
// (it's shown after did-finish-load). Try focusing now, and if
// the window doesn't have focus yet, wait for it.
nextTick(() => {
if (document.hasFocus()) {
searchInput.value?.focus()
} else {
const focusOnWindowReady = () => {
searchInput.value?.focus()
window.removeEventListener('focus', focusOnWindowReady)
}
window.addEventListener('focus', focusOnWindowReady)
// The input may not be focusable yet due to:
// 1. Modal transition (v-if + <Transition appear>) delaying DOM readiness
// 2. Electron window not yet visible (shown after did-finish-load)
// Retry with rAF until focus actually lands on the input.
const tryFocus = () => {
if (searchInput.value) {
searchInput.value.focus()
if (document.activeElement === searchInput.value) return
}
})
requestAnimationFrame(tryFocus)
}
requestAnimationFrame(tryFocus)
}
})