Repository: directus/directus
File: app/src/views/private/components/overlay-item-content.vue (Vue)

Code before:
	collection: string;
	primaryKey: PrimaryKey | null;
	junctionField: string | null;
	relatedCollection: string | null;
	initialValues: Record<string, any> | null;
	fields: Field[];
	disabled: boolean;
	nonEditable: boolean;
	loading: boolean;
	validationErrors: any[];
	junctionFieldLocation?: string;
	relatedCollectionFields: Field[];
	relatedPrimaryKey: PrimaryKey;
	relatedPrimaryKeyField: string | null;
	refresh: () => void;
	collabContext?: CollabContext;
	relatedCollabContext?: CollabContext;
}>();

const internalEdits = defineModel<Record<string, any>>('internal-edits');

const { mainInitialValues, junctionInitialValues } = useInitialValues();
const { file } = useFile();
const { scrollToField } = useValidationScrollToField();

const validationErrorsEl = useTemplateRef<any>('validationErrors');

watch(
	() => validationErrors,
	async (newVal, oldVal) => {
		if (isEqual(newVal, oldVal)) return;

		if (newVal?.length > 0) {
			await nextTick();
			validationErrorsEl.value?.$el?.scrollIntoView({ behavior: 'smooth' });
		}
	},
);

const swapFormOrder = computed(() => junctionFieldLocation === 'top');
const hasVisibleFieldsRelated = computed(() => relatedCollectionFields.some((field: Field) => !field.meta?.hidden));
const hasVisibleFieldsJunction = computed(() => fields.some((field: Field) => !field.meta?.hidden));
const emptyForm = computed(() => !hasVisibleFieldsRelated.value && !hasVisibleFieldsJunction.value);

function setRelationEdits(edits: any) {
	if (!junctionField || !internalEdits.value) return;

	internalEdits.value[junctionField] = edits;
}

function useInitialValues() {

Review comment (suggestion):
@robluton lets avoid typing as any.

```ts
const validationErrorsEl = useTemplateRef<typeof ValidationErrors>('validationErrors');
```

or just simply remove the type generic, it should be infered

```ts
const validationErrorsEl = useTemplateRef('validationErrors');
```

Code after:
	collection: string;
	primaryKey: PrimaryKey | null;
	junctionField: string | null;
	relatedCollection: string | null;
	initialValues: Record<string, any> | null;
	fields: Field[];
	disabled: boolean;
	nonEditable: boolean;
	loading: boolean;
	validationErrors: any[];
	junctionFieldLocation?: string;
	relatedCollectionFields: Field[];
	relatedPrimaryKey: PrimaryKey;
	relatedPrimaryKeyField: string | null;
	refresh: () => void;
	collabContext?: CollabContext;
	relatedCollabContext?: CollabContext;
}>();

const internalEdits = defineModel<Record<string, any>>('internal-edits');

const { mainInitialValues, junctionInitialValues } = useInitialValues();
const { file } = useFile();
const { scrollToField } = useValidationScrollToField();

const validationErrorsEl = useTemplateRef('validationErrors');

watch(
	() => validationErrors,
	async (newVal, oldVal) => {
		if (isEqual(newVal, oldVal)) return;

		if (newVal?.length > 0) {
			await nextTick();
			validationErrorsEl.value?.$el?.scrollIntoView({ behavior: 'smooth' });
		}
	},
);

const swapFormOrder = computed(() => junctionFieldLocation === 'top');
const hasVisibleFieldsRelated = computed(() => relatedCollectionFields.some((field: Field) => !field.meta?.hidden));
const hasVisibleFieldsJunction = computed(() => fields.some((field: Field) => !field.meta?.hidden));
const emptyForm = computed(() => !hasVisibleFieldsRelated.value && !hasVisibleFieldsJunction.value);

function setRelationEdits(edits: any) {
	if (!junctionField || !internalEdits.value) return;

	internalEdits.value[junctionField] = edits;
}

function useInitialValues() {