From e56bad71fd91431bd442f21ac2d3a4dff0b7296e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Tue, 12 Mar 2024 11:58:54 +0100
Subject: [PATCH] fix: Focus first input when creating  a new
 table/row/column/view
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/modules/modals/CreateColumn.vue | 5 +++++
 src/modules/modals/CreateRow.vue    | 7 +++++++
 src/modules/modals/CreateTable.vue  | 4 +++-
 src/modules/modals/ViewSettings.vue | 1 +
 4 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/modules/modals/CreateColumn.vue b/src/modules/modals/CreateColumn.vue
index 1c21fa746..0d5543287 100644
--- a/src/modules/modals/CreateColumn.vue
+++ b/src/modules/modals/CreateColumn.vue
@@ -212,6 +212,11 @@ export default {
 		combinedType() {
 			this.reset(false, false)
 		},
+		showModal() {
+			this.$nextTick(() => {
+				this.$el.querySelector('input')?.focus()
+			})
+		},
 	},
 	methods: {
 		snakeToCamel(str) {
diff --git a/src/modules/modals/CreateRow.vue b/src/modules/modals/CreateRow.vue
index 529bc5e75..d09ef65e2 100644
--- a/src/modules/modals/CreateRow.vue
+++ b/src/modules/modals/CreateRow.vue
@@ -88,6 +88,13 @@ export default {
 			return mandatoryFieldsEmpty
 		},
 	},
+	watch: {
+		showModal() {
+			this.$nextTick(() => {
+				this.$el.querySelector('input')?.focus()
+			})
+		},
+	},
 	methods: {
 		actionCancel() {
 			this.reset()
diff --git a/src/modules/modals/CreateTable.vue b/src/modules/modals/CreateTable.vue
index 9270394c6..3eceaf1d9 100644
--- a/src/modules/modals/CreateTable.vue
+++ b/src/modules/modals/CreateTable.vue
@@ -20,7 +20,8 @@
 							{{ icon }}
 						</NcButton>
 					</NcEmojiPicker>
-					<input v-model="title"
+					<input ref="titleInput"
+						v-model="title"
 						:class="{missing: errorTitle}"
 						type="text"
 						:placeholder="t('tables', 'Title of the new table')"
@@ -100,6 +101,7 @@ export default {
 		showModal() {
 			// every time when the modal opens chose a new emoji
 			this.loadEmoji()
+			this.$nextTick(() => this.$refs.titleInput.focus())
 		},
 	},
 	beforeMount() {
diff --git a/src/modules/modals/ViewSettings.vue b/src/modules/modals/ViewSettings.vue
index ae4ecf40e..880a015cf 100644
--- a/src/modules/modals/ViewSettings.vue
+++ b/src/modules/modals/ViewSettings.vue
@@ -189,6 +189,7 @@ export default {
 				this.reset()
 				await this.loadTableColumnsFromBE()
 				this.open = true
+				this.$nextTick(() => this.$el.querySelector('input')?.focus())
 			}
 		},
 		open(value) {