diff options
| author | fenn-cs <fenn25.fn@gmail.com> | 2023-11-21 22:07:53 +0100 |
|---|---|---|
| committer | backportbot-nextcloud[bot] <backportbot-nextcloud[bot]@users.noreply.github.com> | 2023-11-23 19:55:40 +0000 |
| commit | ef73f18bff9780d01c4cae13087294b0481f68ed (patch) | |
| tree | efbd79fc312bfc72ce15ab75d996b54a55ccb8d2 /core/src | |
| parent | a8a114ccbb251875afb4d5ba27ea0f4d3125f591 (diff) | |
| download | nextcloud-server-ef73f18bff9780d01c4cae13087294b0481f68ed.tar.gz nextcloud-server-ef73f18bff9780d01c4cae13087294b0481f68ed.zip | |
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>
Diffstat (limited to 'core/src')
| -rw-r--r-- | core/src/views/GlobalSearchModal.vue | 15 |
1 files changed, 14 insertions, 1 deletions
diff --git a/core/src/views/GlobalSearchModal.vue b/core/src/views/GlobalSearchModal.vue index b054b67633b..9058776780f 100644 --- a/core/src/views/GlobalSearchModal.vue +++ b/core/src/views/GlobalSearchModal.vue @@ -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 = '' |