Ref instead

Author: AllanKoder

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 (

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"
                 >