From 2c28312fc957901b86c2f3d1db8fc3376f505d37 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Fri, 21 Apr 2023 15:43:36 +0200
Subject: [PATCH] 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    |  2 +
 .../components/Event/EventActionSection.vue   |  2 +
 js/src/components/Report/ReportModal.vue      | 72 ++++++++++---------
 js/src/components/core/CustomDialog.vue       |  8 +++
 js/src/plugins/dialog.ts                      |  1 +
 js/src/views/Group/GroupView.vue              |  7 +-
 js/src/views/Posts/PostView.vue               |  2 +
 7 files changed, 58 insertions(+), 36 deletions(-)

diff --git a/js/src/components/Comment/EventComment.vue b/js/src/components/Comment/EventComment.vue
index 4792553f..d0069c25 100644
--- a/js/src/components/Comment/EventComment.vue
+++ b/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"
diff --git a/js/src/components/Event/EventActionSection.vue b/js/src/components/Event/EventActionSection.vue
index a9bc529c..c7641cff 100644
--- a/js/src/components/Event/EventActionSection.vue
+++ b/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"
diff --git a/js/src/components/Report/ReportModal.vue b/js/src/components/Report/ReportModal.vue
index 30269cc4..9726e067 100644
--- a/js/src/components/Report/ReportModal.vue
+++ b/js/src/components/Report/ReportModal.vue
@@ -20,38 +20,40 @@
           }}
         </p>
       </div>
-      <div class="">
-        <div class="" v-if="comment">
-          <article class="">
-            <div class="">
-              <figure class="h-8 w-8" v-if="comment?.actor?.avatar">
-                <img
-                  :src="comment.actor.avatar.url"
-                  alt=""
-                  width="48"
-                  height="48"
-                />
-              </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"
-                  >@{{ usernameWithDomain(comment?.actor) }}</small
-                >
-                <br />
-                <p v-html="comment.text"></p>
-              </div>
-            </div>
-          </article>
-        </div>
+      <div>
+        <article v-if="comment">
+          <div>
+            <figure class="h-8 w-8" v-if="comment?.actor?.avatar">
+              <img
+                :src="comment.actor.avatar.url"
+                alt=""
+                width="48"
+                height="48"
+              />
+            </figure>
+            <AccountCircle v-else :size="48" />
+          </div>
+          <div class="prose dark:prose-invert">
+            <strong>{{ comment?.actor?.name }}</strong>
+            <small v-if="comment.actor"
+              >@{{ usernameWithDomain(comment?.actor) }}</small
+            >
+            <br />
+            <p v-html="comment.text"></p>
+          </div>
+        </article>
 
         <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 => {
diff --git a/js/src/components/core/CustomDialog.vue b/js/src/components/core/CustomDialog.vue
index c2de32cf..df802e04 100644
--- a/js/src/components/core/CustomDialog.vue
+++ b/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];
 // });
diff --git a/js/src/plugins/dialog.ts b/js/src/plugins/dialog.ts
index 42eefc50..5b9071a7 100644
--- a/js/src/plugins/dialog.ts
+++ b/js/src/plugins/dialog.ts
@@ -48,6 +48,7 @@ export class Dialog {
         inputAttrs,
         hasInput,
       },
+      autoFocus: false,
     });
   }
 
diff --git a/js/src/views/Group/GroupView.vue b/js/src/views/Group/GroupView.vue
index 77582062..47f93e28 100644
--- a/js/src/views/Group/GroupView.vue
+++ b/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"
diff --git a/js/src/views/Posts/PostView.vue b/js/src/views/Posts/PostView.vue
index 8aacfecb..a77fc7a7 100644
--- a/js/src/views/Posts/PostView.vue
+++ b/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"