Merge pull request #41706 from nextcloud/backport/41652/stable28

[stable28] Focus global search input on open
nextcloud · Nov 23, 2023 · 20be3a7 · 20be3a7
2 parents a8a114c + ef73f18
commit 20be3a7
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 4 deletions.
diff --git 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 = ''

diff --git a/dist/core-global-search.js b/dist/core-global-search.js
diff --git a/dist/core-global-search.js.map b/dist/core-global-search.js.map