From ff3de30e86646ec50d02a11eee8375b2ae152756 Mon Sep 17 00:00:00 2001
From: Allan Kong <allankong176@gmail.com>
Date: Sat, 16 Aug 2025 20:01:24 -0700
Subject: [PATCH 1/3] Scrolls into view

---
 resources/js/Pages/Resources/Create.vue | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/resources/js/Pages/Resources/Create.vue b/resources/js/Pages/Resources/Create.vue
index 36686e84..0d64e19c 100644
--- a/resources/js/Pages/Resources/Create.vue
+++ b/resources/js/Pages/Resources/Create.vue
@@ -70,7 +70,9 @@ const submitForm = () => {
             toast.add({
                 severity: "error",
                 summary: "Error",
-                detail: errors ? Object.values(errors).flat().join(' ') : "An error occurred while creating the resource.",
+                detail: errors
+                    ? Object.values(errors).flat().join("\n")
+                    : "An error occurred while creating the resource.",
                 life: 10000,
             });
         },
@@ -81,6 +83,16 @@ const handleFormChange = (newFormData) => {
     Object.keys(newFormData).forEach((key) => {
         formData[key] = newFormData[key];
     });
+    const htmlForm = document.getElementById("create-resource-form");
+    if (htmlForm) {
+        htmlForm.scrollIntoView({
+            behavior: "smooth",
+            block: "start",
+            inline: "nearest",
+        });
+        // Also scroll the window to the top for full reliability
+        window.scrollTo({ top: 0, behavior: "smooth" });
+    }
 };
 </script>
 
@@ -212,6 +224,7 @@ const handleFormChange = (newFormData) => {
                 <!-- Main Form Section -->
                 <div
                     class="bg-white h-min shadow-lg rounded-lg p-6 flex-1 max-w-full md:max-w-3xl min-w-0 md:min-w-[28rem] relative"
+                    id="create-resource-form"
                 >
                     <!-- Move Reset button to top right -->
                     <div class="flex justify-end mb-2">

From 34665e8c3d7aea27eb830e387d589a026e7c8b8d Mon Sep 17 00:00:00 2001
From: Allan Kong <allankong176@gmail.com>
Date: Sat, 16 Aug 2025 20:04:16 -0700
Subject: [PATCH 2/3] Changes

---
 resources/js/Pages/Resources/Create.vue | 34 +++++++++++++++----------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/resources/js/Pages/Resources/Create.vue b/resources/js/Pages/Resources/Create.vue
index 0d64e19c..7e19c5f2 100644
--- a/resources/js/Pages/Resources/Create.vue
+++ b/resources/js/Pages/Resources/Create.vue
@@ -51,6 +51,22 @@ const stepperValue = ref("1");
 
 const toast = useToast();
 
+const scrollToForm = () => {
+    const htmlForm = document.getElementById("create-resource-form");
+    if (htmlForm) {
+        htmlForm.scrollIntoView({
+            behavior: "smooth",
+            block: "start",
+            inline: "nearest",
+        });
+    }
+};
+
+const navigateToStep = (step) => {
+    stepperValue.value = step;
+    scrollToForm();
+};
+
 const resetForm = () => {
     clearLocalStorage();
     formData.reset();
@@ -83,16 +99,6 @@ const handleFormChange = (newFormData) => {
     Object.keys(newFormData).forEach((key) => {
         formData[key] = newFormData[key];
     });
-    const htmlForm = document.getElementById("create-resource-form");
-    if (htmlForm) {
-        htmlForm.scrollIntoView({
-            behavior: "smooth",
-            block: "start",
-            inline: "nearest",
-        });
-        // Also scroll the window to the top for full reliability
-        window.scrollTo({ top: 0, behavior: "smooth" });
-    }
 };
 </script>
 
@@ -249,22 +255,22 @@ const handleFormChange = (newFormData) => {
                                 <MandatoryFields
                                     :formData="formData"
                                     @change="handleFormChange"
-                                    @next="() => (stepperValue = '2')"
+                                    @next="() => navigateToStep('2')"
                                 ></MandatoryFields>
                             </StepPanel>
                             <StepPanel value="2">
                                 <TopicsFields
                                     :form="formData"
                                     @change="handleFormChange"
-                                    @back="() => (stepperValue = '1')"
-                                    @next="() => (stepperValue = '3')"
+                                    @back="() => navigateToStep('1')"
+                                    @next="() => navigateToStep('3')"
                                 ></TopicsFields>
                             </StepPanel>
                             <StepPanel value="3">
                                 <TagsFields
                                     :form="formData"
                                     @change="handleFormChange"
-                                    @back="() => (stepperValue = '2')"
+                                    @back="() => navigateToStep('2')"
                                     @next="submitForm"
                                 />
                             </StepPanel>

From 771e52a6425dc36bb92ade6d41ee694e15f41eda Mon Sep 17 00:00:00 2001
From: Allan Kong <allankong176@gmail.com>
Date: Sat, 16 Aug 2025 20:07:38 -0700
Subject: [PATCH 3/3] Ref instead

---
 resources/js/Components/Comments/Commentable.vue | 6 +++---
 resources/js/Pages/Resources/Create.vue          | 7 ++++---
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/resources/js/Components/Comments/Commentable.vue b/resources/js/Components/Comments/Commentable.vue
index 5ab89abc..e4339425 100644
--- a/resources/js/Components/Comments/Commentable.vue
+++ b/resources/js/Components/Comments/Commentable.vue
@@ -51,6 +51,7 @@ const commentsLeft = ref(props.commentsCount);
 const idToChildren = ref(new Map());
 const sortBy = ref(props.sortByInitialValue);
 const hasOpenedComments = ref(false);
+const commentRefs = ref(new Map());
 
 const createdNewCommentCallback = (newComment, userData) => {
     console.log("Created a new comment!", newComment, userData);
@@ -59,9 +60,7 @@ const createdNewCommentCallback = (newComment, userData) => {
 
     // Ensure DOM updates are complete, then scroll to the new comment
     nextTick(() => {
-        const newCommentElement = document.getElementById(
-            "comment_" + newComment.id
-        );
+        const newCommentElement = commentRefs.value.get(`comment_${newComment.id}`);
         if (newCommentElement) {
             newCommentElement.scrollIntoView({
                 behavior: "smooth",
@@ -76,6 +75,7 @@ provide("commentableId", props.commentableId);
 provide("commentableKey", props.commentableKey);
 provide("users", readonly(usersMap));
 provide("createdNewCommentCallback", createdNewCommentCallback);
+provide("commentRefs", commentRefs);
 
 const showEmptyState = computed(() => {
     return (
diff --git a/resources/js/Pages/Resources/Create.vue b/resources/js/Pages/Resources/Create.vue
index 7e19c5f2..55e65bac 100644
--- a/resources/js/Pages/Resources/Create.vue
+++ b/resources/js/Pages/Resources/Create.vue
@@ -48,13 +48,13 @@ const { clearLocalStorage } = useLocalStorageSaver(
 
 const showReset = ref(false);
 const stepperValue = ref("1");
+const formRef = ref(null);
 
 const toast = useToast();
 
 const scrollToForm = () => {
-    const htmlForm = document.getElementById("create-resource-form");
-    if (htmlForm) {
-        htmlForm.scrollIntoView({
+    if (formRef.value) {
+        formRef.value.scrollIntoView({
             behavior: "smooth",
             block: "start",
             inline: "nearest",
@@ -229,6 +229,7 @@ const handleFormChange = (newFormData) => {
                 </div>
                 <!-- Main Form Section -->
                 <div
+                    ref="formRef"
                     class="bg-white h-min shadow-lg rounded-lg p-6 flex-1 max-w-full md:max-w-3xl min-w-0 md:min-w-[28rem] relative"
                     id="create-resource-form"
                 >