Focus global search input on open

For better accesibility, the search input in the global search
modal should be focused when the search modal is opened.

Resolves: https://github.com/nextcloud/server/issues/41651

Signed-off-by: fenn-cs <fenn25.fn@gmail.com>
Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>
pull/41652/head
fenn-cs 6 months ago committed by nextcloud-command
parent 953382e937
commit 8c6c0d1c85

@ -13,7 +13,8 @@
<!-- Global search form -->
<div ref="globalSearch" class="global-search-modal">
<h1>{{ t('core', 'Global search') }}</h1>
<NcInputField :value.sync="searchQuery"
<NcInputField ref="searchInput"
:value.sync="searchQuery"
type="text"
:label="t('core', 'Search apps, files, tags, messages') + '...'"
@update:value="debouncedFind" />
@ -222,6 +223,15 @@ export default {
},
},
},
watch: {
isVisible(value) {
this.$nextTick(() => {
if (value) {
this.focusInput()
}
})
},
},
mounted() {
getProviders().then((providers) => {
this.providers = providers
@ -503,6 +513,9 @@ export default {
this.dateFilter.text = t('core', `Between ${this.dateFilter.startFrom.toLocaleDateString()} and ${this.dateFilter.endAt.toLocaleDateString()}`)
this.updateDateFilter()
},
focusInput() {
this.$refs.searchInput.$el.children[0].children[0].focus()
},
closeModal() {
this.$refs.globalSearchModal.close()
this.searchQuery = ''

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long
Loading…
Cancel
Save