Issue 5344 (#5346)

* add more ignore pattern for git

* revert the change for api/.gitignore

* fix issue-5344 support autofocus on first non-readonly form field on open drawer

* fix use a more accurate variable name

* Rename autofocusonfirstitem to autofocus

Co-authored-by: Jian Liao <jianliao@adobe.com>
Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>

app/src/components/v-form/form-field-interface.vue

@@ -15,6 +15,7 @@
 					: `interface-${getDefaultInterfaceForType(field.type)}`
 			"
 			v-bind="(field.meta && field.meta.options) || {}"
+			:autofocus="disabled !== true && autofocus"
 			:disabled="disabled"
 			:loading="loading"
 			:value="value === undefined ? field.schema.default_value : value"
@@ -70,6 +71,10 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		autofocus: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	setup(props) {
 		const { interfaces } = getInterfaces();

app/src/components/v-form/form-field.vue

@@ -31,6 +31,7 @@
 		<div class="label-spacer" v-else-if="['full', 'fill'].includes(field.meta && field.meta.width) === false" />
 
 		<form-field-interface
+			:autofocus="autofocus"
 			:value="_value"
 			:field="field"
 			:loading="loading"
@@ -112,6 +113,10 @@ export default defineComponent({
 			type: Object as PropType<ValidationError>,
 			default: null,
 		},
+		autofocus: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	setup(props, { emit }) {
 		const isDisabled = computed(() => {

app/src/components/v-form/v-form.vue

@@ -18,8 +18,9 @@
 		</v-notice>
 
 		<form-field
-			v-for="field in formFields"
+			v-for="(field, index) in formFields"
 			:field="field"
+			:autofocus="index === firstEditableFieldIndex && autofocus"
 			:key="field.field"
 			:value="(edits || {})[field.field]"
 			:initial-value="(initialValues || {})[field.field]"
@@ -95,6 +96,10 @@ export default defineComponent({
 			type: Array as PropType<ValidationError[]>,
 			default: () => [],
 		},
+		autofocus: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	setup(props, { emit }) {
 		const el = ref<Element>();
@@ -107,6 +112,14 @@ export default defineComponent({
 		const { formFields, gridClass } = useForm();
 		const { toggleBatchField, batchActiveFields } = useBatch();
 
+		const firstEditableFieldIndex = computed(() => {
+			for (let i = 0; i < formFields.value.length; i++) {
+				if (formFields.value[i].meta && !formFields.value[i].meta.readonly) {
+					return i;
+				}
+			}
+		});
+
 		/**
 		 * The validation errors that don't apply to any visible fields. This can occur if an admin accidentally
 		 * made a hidden field required for example. We want to show these errors at the top of the page, so the
@@ -130,6 +143,7 @@ export default defineComponent({
 			unsetValue,
 			marked,
 			unknownValidationErrors,
+			firstEditableFieldIndex,
 		};
 
 		function useForm() {

app/src/interfaces/text-input/text-input.vue

@@ -1,5 +1,6 @@
 <template>
 	<v-input
+		:autofocus="autofocus"
 		:value="value"
 		:nullable="!clear"
 		:placeholder="placeholder"
@@ -80,6 +81,10 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		autofocus: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	setup(props) {
 		const charsRemaining = computed(() => {

app/src/views/private/components/drawer-item/drawer-item.vue

@@ -36,6 +36,7 @@
 					:primary-key="relatedPrimaryKey"
 					:edits="_edits[junctionField]"
 					:fields="junctionRelatedCollectionFields"
+					autofocus
 					@input="setJunctionEdits"
 				/>