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,38 +20,40 @@
           }}
         </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">
-              <figure class="h-8 w-8" v-if="comment?.actor?.avatar">
+              <img
-                <img
+                :src="comment.actor.avatar.url"
-                  :src="comment.actor.avatar.url"
+                alt=""
-                  alt=""
+                width="48"
-                  width="48"
+                height="48"
-                  height="48"
+              />
-                />
+            </figure>
-              </figure>
+            <AccountCircle v-else :size="48" />
-              <AccountCircle v-else :size="48" />
+          </div>
-            </div>
+          <div class="prose dark:prose-invert">
-            <div class="">
+            <strong>{{ comment?.actor?.name }}</strong>
-              <div class="prose dark:prose-invert">
+            <small v-if="comment.actor"
-                <strong>{{ comment?.actor?.name }}</strong>
+              >@{{ usernameWithDomain(comment?.actor) }}</small
-                <small v-if="comment.actor"
+            >
-                  >@{{ usernameWithDomain(comment?.actor) }}</small
+            <br />
-                >
+            <p v-html="comment.text"></p>
-                <br />
+          </div>
-                <p v-html="comment.text"></p>
+        </article>
-              </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"