fix(front): Focus report comment input in report modal

Closes #1236

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Comment/EventComment.vue

@@ -194,6 +194,8 @@
       has-modal-card
       ref="reportModal"
       :close-button-aria-label="t('Close')"
+      :autoFocus="false"
+      :trapFocus="false"
     >
       <ReportModal
         :on-confirm="reportComment"

js/src/components/Event/EventActionSection.vue

@@ -190,6 +190,8 @@
     has-modal-card
     ref="reportModal"
     :close-button-aria-label="t('Close')"
+    :autoFocus="false"
+    :trapFocus="false"
   >
     <ReportModal
       :on-confirm="reportEvent"

js/src/components/Report/ReportModal.vue

@@ -20,10 +20,9 @@
           }}
         </p>
       </div>
-      <div class="">
+      <div>
-        <div class="" v-if="comment">
+        <article v-if="comment">
-          <article class="">
+          <div>
-            <div class="">
             <figure class="h-8 w-8" v-if="comment?.actor?.avatar">
               <img
                 :src="comment.actor.avatar.url"
@@ -34,7 +33,6 @@
             </figure>
             <AccountCircle v-else :size="48" />
           </div>
-            <div class="">
           <div class="prose dark:prose-invert">
             <strong>{{ comment?.actor?.name }}</strong>
             <small v-if="comment.actor"
@@ -43,15 +41,19 @@
             <br />
             <p v-html="comment.text"></p>
           </div>
-            </div>
         </article>
-        </div>
 
         <o-field
           :label="t('Additional comments')"
           label-for="additional-comments"
         >
-          <o-input v-model="content" type="textarea" id="additional-comments" />
+          <o-input
+            v-model="content"
+            type="textarea"
+            id="additional-comments"
+            autofocus
+            ref="reportAdditionalCommentsInput"
+          />
         </o-field>
 
         <div class="control" v-if="outsideDomain">
@@ -91,6 +93,7 @@ import { useI18n } from "vue-i18n";
 import { IComment } from "../../types/comment.model";
 import { usernameWithDomain } from "@/types/actor";
 import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
+import { useFocus } from "@vueuse/core";
 
 const props = withDefaults(
   defineProps<{
@@ -108,18 +111,17 @@ const props = withDefaults(
 
 const emit = defineEmits(["close"]);
 
-// @Component({
-//   mounted() {
-//     this.$data.isActive = true;
-//   },
-// })
-
-// isActive = false;
-
 const content = ref("");
 
 const forward = ref(false);
 
+const reportAdditionalCommentsInput = ref();
+// https://github.com/oruga-ui/oruga/issues/339
+const reportAdditionalCommentsInputComp = computed(
+  () => reportAdditionalCommentsInput.value?.$refs.textarea
+);
+useFocus(reportAdditionalCommentsInputComp, { initialValue: true });
+
 const { t } = useI18n({ useScope: "global" });
 
 const translatedCancelText = computed((): string => {

js/src/components/core/CustomDialog.vue

@@ -31,6 +31,7 @@
             ref="input"
             v-bind="inputAttrs"
             @keydown.enter="confirm"
+            autofocus
           />
         </o-field>
       </div>
@@ -48,6 +49,7 @@
 </template>
 
 <script lang="ts" setup>
+import { useFocus } from "@vueuse/core";
 import { computed, nextTick, ref } from "vue";
 import { useI18n } from "vue-i18n";
 
@@ -87,6 +89,12 @@ const { t } = useI18n({ useScope: "global" });
 const prompt = ref<string>(props.hasInput ? props.inputAttrs?.value ?? "" : "");
 const input = ref();
 
+// https://github.com/oruga-ui/oruga/issues/339
+const promptInputComp = computed(() => input.value?.$refs.input);
+if (props.hasInput) {
+  useFocus(promptInputComp, { initialValue: true });
+}
+
 // const dialogClass = computed(() => {
 //   return [props.size];
 // });

js/src/plugins/dialog.ts

@@ -48,6 +48,7 @@ export class Dialog {
         inputAttrs,
         hasInput,
       },
+      autoFocus: false,
     });
   }
 

js/src/views/Group/GroupView.vue

@@ -617,7 +617,12 @@
         </div>
       </o-modal>
     </div>
-    <o-modal v-if="group" v-model:active="isReportModalActive">
+    <o-modal
+      v-if="group"
+      v-model:active="isReportModalActive"
+      :autoFocus="false"
+      :trapFocus="false"
+    >
       <report-modal
         ref="reportModalRef"
         :on-confirm="reportGroup"

js/src/views/Posts/PostView.vue

@@ -218,6 +218,8 @@
       v-model:active="isReportModalActive"
       has-modal-card
       ref="reportModal"
+      :autoFocus="false"
+      :trapFocus="false"
     >
       <ReportModal
         :on-confirm="reportPost"