Skip to content

Commit

Permalink
Focus global search input on open
Browse files Browse the repository at this point in the history
For better accesibility, the search input in the global search
modal should be focused when the search modal is opened.

Resolves: #41651

Signed-off-by: fenn-cs <fenn25.fn@gmail.com>
  • Loading branch information
nfebe committed Nov 21, 2023
1 parent 7c6ee7e commit 097219b
Showing 1 changed file with 12 additions and 1 deletion.
13 changes: 12 additions & 1 deletion core/src/views/GlobalSearchModal.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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="search"
:value.sync="searchQuery"
type="text"
:label="t('core', 'Search apps, files, tags, messages') + '...'"
@update:value="debouncedFind" />
Expand Down Expand Up @@ -212,6 +213,7 @@ export default {
},
},
mounted() {
this.initSearch()
getProviders().then((providers) => {
this.providers = providers
console.debug('Search providers', this.providers)
Expand Down Expand Up @@ -489,6 +491,15 @@ export default {
this.dateFilter.text = t('core', `Between ${this.dateFilter.startFrom.toLocaleDateString()} and ${this.dateFilter.endAt.toLocaleDateString()}`)
this.updateDateFilter()
},
// For initialization operations that should happen when component is mounted
initSearch() {
this.focusInput()
},
focusInput() {
this.$nextTick(() => {
this.$refs.search.$el.children[0].children[0].focus()
})
},
closeModal() {
this.searchQuery = ''
},
Expand Down

0 comments on commit 097219b

Please sign in to comment.