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

Closes #1236

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2023-04-21 15:43:36 +02:00
parent 2043c98717
commit 2c28312fc9
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773
7 changed files with 58 additions and 36 deletions

View File

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

View File

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

View File

@ -20,38 +20,40 @@
}} }}
</p> </p>
</div> </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 <o-field
:label="t('Additional comments')" :label="t('Additional comments')"
label-for="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> </o-field>
<div class="control" v-if="outsideDomain"> <div class="control" v-if="outsideDomain">
@ -91,6 +93,7 @@ import { useI18n } from "vue-i18n";
import { IComment } from "../../types/comment.model"; import { IComment } from "../../types/comment.model";
import { usernameWithDomain } from "@/types/actor"; import { usernameWithDomain } from "@/types/actor";
import AccountCircle from "vue-material-design-icons/AccountCircle.vue"; import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
import { useFocus } from "@vueuse/core";
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
@ -108,18 +111,17 @@ const props = withDefaults(
const emit = defineEmits(["close"]); const emit = defineEmits(["close"]);
// @Component({
// mounted() {
// this.$data.isActive = true;
// },
// })
// isActive = false;
const content = ref(""); const content = ref("");
const forward = ref(false); 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 { t } = useI18n({ useScope: "global" });
const translatedCancelText = computed((): string => { const translatedCancelText = computed((): string => {

View File

@ -31,6 +31,7 @@
ref="input" ref="input"
v-bind="inputAttrs" v-bind="inputAttrs"
@keydown.enter="confirm" @keydown.enter="confirm"
autofocus
/> />
</o-field> </o-field>
</div> </div>
@ -48,6 +49,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useFocus } from "@vueuse/core";
import { computed, nextTick, ref } from "vue"; import { computed, nextTick, ref } from "vue";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
@ -87,6 +89,12 @@ const { t } = useI18n({ useScope: "global" });
const prompt = ref<string>(props.hasInput ? props.inputAttrs?.value ?? "" : ""); const prompt = ref<string>(props.hasInput ? props.inputAttrs?.value ?? "" : "");
const input = ref(); 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(() => { // const dialogClass = computed(() => {
// return [props.size]; // return [props.size];
// }); // });

View File

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

View File

@ -617,7 +617,12 @@
</div> </div>
</o-modal> </o-modal>
</div> </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 <report-modal
ref="reportModalRef" ref="reportModalRef"
:on-confirm="reportGroup" :on-confirm="reportGroup"

View File

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