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

@@ -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;
 				}
 			}

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

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"