feat: scroll to new contact

frontend/src/components/grouping/ErrorNotificationGroupingComponent.vue

@@ -147,7 +147,7 @@ const goToStep = (step: number) => {
   >
     <p class="body-compact-01">
       <span class="heading-compact-01 heading-compact-01-dark">Assigned contact required:</span>
-      You must associate <span class="heading-compact-01 heading-compact-01-dark">“{{ item }}”</span> address with an existing contact or <a href="#">add a new contact</a> before submitting the application again.
+      You must associate <span class="heading-compact-01 heading-compact-01-dark">“{{ item }}”</span> address with an existing contact or <a href="#" @click.prevent="scrollToNewContact">add a new contact</a> before submitting the application again.
     </p>
   </cds-inline-notification>
   </div>

frontend/src/pages/FormBCeIDPage.vue

@@ -46,7 +46,7 @@ const progressIndicatorBus = useEventBus<ProgressNotification>('progress-indicat
 
 
 const router = useRouter();
-const { setScrollPoint } = useFocus();
+const { setScrollPoint, setFocusedComponent } = useFocus();
 const submitterInformation = ForestClientUserSession.user;
 const instance = getCurrentInstance();
 const session = instance?.appContext.config.globalProperties.$session;
@@ -295,6 +295,18 @@ progressIndicatorBus.on((event: ProgressNotification) => {
 });
 
 const reEval = () => (revalidateBus.emit())
+
+const contactWizardRef = ref<InstanceType<typeof ContactWizardStep> | null>(null)
+
+const scrollToNewContact = () => {
+  if (contactWizardRef.value) {
+    // Skip auto-focus so to do it only when scroll is done.
+    const index = contactWizardRef.value.addContact(false) - 1;
+    setScrollPoint(`additional-contact-${index}`, undefined, () => {
+      setFocusedComponent(`addressname_${index}`);
+    });
+  }
+}
 </script>
 
 <template>
@@ -396,6 +408,7 @@ const reEval = () => (revalidateBus.emit())
             v-model:data="formData"
             :active="currentTab == 2"
             @valid="validateStep"
+            ref="contactWizardRef"
           />
       </div>
     </div>

frontend/src/pages/applyform/ContactWizardStep.vue

@@ -68,8 +68,14 @@ const uniqueValues = isUniqueDescriptive()
 
 //New contact being added
 const otherContacts = computed(() => formData.location.contacts.slice(1))
-const addContact = () =>
-  formData.location.contacts.push(JSON.parse(JSON.stringify(emptyContact)))
+const addContact = (autoFocus = true) => {
+  const newLength = formData.location.contacts.push(JSON.parse(JSON.stringify(emptyContact)))
+  if (autoFocus) {
+    const focusIndex = newLength - 1;
+    setFocusedComponent(`addressname_${focusIndex}`);
+  }
+  return newLength;
+}
 
 const removeContact = (index: number) => () => {
     updateContact(undefined, index)
@@ -113,6 +119,10 @@ const handleRemove = (index: number) => {
 }
 
 onMounted(() => setFocusedComponent('addressname_0',800))
+
+defineExpose({
+  addContact
+})
 </script>
 
 <template>
@@ -132,7 +142,7 @@ onMounted(() => setFocusedComponent('addressname_0',800))
 
     <div  v-for="(contact, index) in otherContacts">
       <hr />
-      <div class="grouping-09">
+      <div class="grouping-09" :data-scroll="`additional-contact-${index + 1}`">
       <span class="heading-03">Additional contact</span>
     </div>
     <contact-group-component