Move scroll logic to formError component

Author: samuelwei

resources/js/components/AdminStreamingRoomTypeEditButton.vue

@@ -213,7 +213,6 @@ function save() {
     })
     .finally(() => {
       isLoadingAction.value = false;
-      formErrors.scrollToFirstError();
     });
 }
 </script>

resources/js/components/FormError.vue

@@ -1,18 +1,51 @@
 <script setup>
+import { computed, nextTick, onMounted, ref, watch } from "vue";
+
 const props = defineProps({
   errors: {
     type: [Object, null],
     required: true,
     default: null,
   },
 });
+
+const formError = ref(null);
+
+const hasError = computed(() => {
+  return props.errors != null && Object.keys(props.errors).length > 0;
+});
+
+async function scrollToFirstError() {
+  await nextTick();
+
+  const selfDomElement = formError.value;
+  const firstDomElement = document.getElementsByClassName("form-error")[0];
+
+  // Only scroll into view, if this form error is the first form error rendered on the page
+  if (selfDomElement != null && selfDomElement === firstDomElement) {
+    selfDomElement.scrollIntoView({ behavior: "smooth", block: "center" });
+  }
+}
+
+// Scroll to error if errors visible state changes
+watch(hasError, async () => {
+  await scrollToFirstError();
+});
+
+// Scroll to error if the component is mounted with errors present
+onMounted(async () => {
+  if (hasError.value) {
+    await scrollToFirstError();
+  }
+});
 </script>
 
 <template>
   <p
-    v-if="props.errors != null && Object.keys(props.errors).length > 0"
+    v-if="hasError"
     class="form-error text-red-500"
     role="alert"
+    ref="formError"
   >
     <template v-for="(error, index) in props.errors" :key="index">
       {{ error }}

resources/js/components/RoomCreateComponent.vue

@@ -169,7 +169,6 @@ function handleOk() {
           }
 
           formErrors.set(error.response.data.errors);
-          formErrors.scrollToFirstError();
           return;
         }
         // permission denied

resources/js/components/RoomJoinButton.vue

@@ -411,9 +411,7 @@ function getJoinUrl() {
         if (error.response.status === env.HTTP_UNPROCESSABLE_ENTITY) {
           formErrors.set(error.response.data.errors);
 
-          loadStartJoinRequirements().then(() => {
-            formErrors.scrollToFirstError();
-          });
+          loadStartJoinRequirements();
           return;
         }
 

resources/js/components/RoomTabDescription.vue

@@ -234,7 +234,6 @@ function save() {
     .finally(() => {
       // Disable saving indicator
       isBusy.value = false;
-      formErrors.scrollToFirstError();
     });
 }
 

resources/js/components/RoomTabFilesEditButton.vue

@@ -211,7 +211,6 @@ function save() {
     })
     .finally(() => {
       isLoadingAction.value = false;
-      formErrors.scrollToFirstError();
     });
 }
 </script>

resources/js/components/RoomTabFilesUploadButton.vue

@@ -266,9 +266,6 @@ function uploadFile(file) {
         }
       }
       api.error(error, { redirectOnUnauthenticated: false });
-    })
-    .finally(() => {
-      formErrors.scrollToFirstError();
     });
 }
 </script>

resources/js/components/RoomTabMembersAddSingleModal.vue

@@ -243,7 +243,6 @@ function save() {
     })
     .finally(() => {
       isLoadingAction.value = false;
-      formErrors.scrollToFirstError();
     });
 }
 </script>

resources/js/components/RoomTabMembersBulkDeleteButton.vue

@@ -134,7 +134,6 @@ function deleteMembers() {
     })
     .finally(() => {
       isLoadingAction.value = false;
-      formErrors.scrollToFirstError();
     });
 }
 </script>

resources/js/components/RoomTabMembersBulkEditButton.vue

@@ -172,7 +172,6 @@ function save() {
     })
     .finally(() => {
       isLoadingAction.value = false;
-      formErrors.scrollToFirstError();
     });
 }
 </script>