From bff0f8eda3bf0343aee1454a8f27d65982f71690 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Tue, 7 Jan 2025 16:12:33 +0100
Subject: [PATCH] #88 - add auto focus on edit field

---
 src/components/comments/Comment.vue | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/comments/Comment.vue b/src/components/comments/Comment.vue
index aa9257f..9771853 100644
--- a/src/components/comments/Comment.vue
+++ b/src/components/comments/Comment.vue
@@ -25,7 +25,13 @@
       {{ comment.text }}
     </p>
 
-    <textarea v-else class="comment__body" v-model="draftText" :rows="Math.ceil(draftText.length / 32)"></textarea>
+    <textarea
+      v-else
+      class="comment__body"
+      v-model="draftText"
+      :rows="Math.ceil(draftText.length / 32)"
+      ref="editField"
+    ></textarea>
 
     <footer v-if="!comment.isEditMode" class="comment__replies">
       <p v-if="comment.replies?.length > 0">
@@ -40,7 +46,7 @@
         <button
           class="btn btn--transparent btn--icon btn--sm"
           data-icon="edit"
-          @click="comment.isEditMode = true"
+          @click="editComment($event)"
         >
           <span class="sr-only">Éditer</span>
         </button>
@@ -91,6 +97,7 @@ const api = useApiStore();
 const dialog = useDialogStore();
 const { activeTracks } = storeToRefs(useDialogStore());
 const draftText = ref(comment.text);
+const editField = ref(null);
 
 //  Functions
 const getStatus = computed(() => {
@@ -167,6 +174,13 @@ function cancelEditComment(event) {
   comment.isEditMode = false;
   draftText.value = comment.text;
 }
+
+function editComment(event) {
+  comment.isEditMode = true;
+  setTimeout(() => {
+    editField.value.focus();
+  }, 100);
+}
 </script>
 
 <style scoped>