From c4f8214ad8d6c6633b7bd99fe08c5e53e59cd729 Mon Sep 17 00:00:00 2001
From: Azri Kahar <42867097+azrikahar@users.noreply.github.com>
Date: Thu, 2 Dec 2021 05:09:21 +0800
Subject: [PATCH] Autofocus first input in create item form (#9583)

* autofocus first input in create form

* add autofocus to translations interface

* avoid setting firstEditableField to hidden fields

* Base autofocus on prop

Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>
---
 app/src/components/v-form/v-form.vue             | 2 +-
 app/src/interfaces/translations/translations.vue | 5 +++++
 app/src/modules/content/routes/item.vue          | 1 +
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/app/src/components/v-form/v-form.vue b/app/src/components/v-form/v-form.vue
index 5248bb3b35..dfc779a0ea 100644
--- a/app/src/components/v-form/v-form.vue
+++ b/app/src/components/v-form/v-form.vue
@@ -159,7 +159,7 @@ export default defineComponent({
 
 		const firstEditableFieldIndex = computed(() => {
 			for (let i = 0; i < formFields.value.length; i++) {
-				if (formFields.value[i].meta && !formFields.value[i].meta?.readonly) {
+				if (formFields.value[i].meta && !formFields.value[i].meta?.readonly && !formFields.value[i].meta?.hidden) {
 					return i;
 				}
 			}
diff --git a/app/src/interfaces/translations/translations.vue b/app/src/interfaces/translations/translations.vue
index 5376981c41..84a6bbd33e 100644
--- a/app/src/interfaces/translations/translations.vue
+++ b/app/src/interfaces/translations/translations.vue
@@ -18,6 +18,7 @@
 				:model-value="firstItem"
 				:initial-values="firstItemInitial"
 				:badge="languageOptions.find((lang) => lang.value === firstLang)?.text"
+				:autofocus="autofocus"
 				@update:modelValue="updateValue($event, firstLang)"
 			/>
 			<v-divider />
@@ -82,6 +83,10 @@ export default defineComponent({
 			type: Array as PropType<(string | number | Record<string, any>)[] | null>,
 			default: null,
 		},
+		autofocus: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	emits: ['input'],
 	setup(props, { emit }) {
diff --git a/app/src/modules/content/routes/item.vue b/app/src/modules/content/routes/item.vue
index 2d574af48e..1431fae3fa 100644
--- a/app/src/modules/content/routes/item.vue
+++ b/app/src/modules/content/routes/item.vue
@@ -150,6 +150,7 @@
 			ref="form"
 			:key="collection"
 			v-model="edits"
+			:autofocus="isNew"
 			:disabled="isNew ? false : updateAllowed === false"
 			:loading="loading"
 			:initial-values="item"