fix: Focus first input when creating

 a new table/row/column/view

Signed-off-by: Julius Härtl <jus@bitgrid.net>

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) {

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()

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() {

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) {