fix: Focus first input when creating a new table/row/column/view

cypress/e2e/column-selection.cy.js

@@ -28,6 +28,7 @@ describe('Test column ' + columnTitle, () => {
 		cy.get('button').contains('Create row').click()
 		cy.get('.modal__content h2').contains('Create row').should('be.visible')
 		cy.get('.modal__content .title').contains(columnTitle).should('be.visible')
+		cy.get('.modal__content .title').click()
 		cy.get('.modal__content .select span[title="second option"]').should('be.visible')
 		cy.get('button').contains('Save').click()
 		cy.get('.custom-table table tr td div').contains('second option').should('be.visible')

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