versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2025-12-06 08:28:20 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: 🐛 Automatically focus composer text input when opened

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-12-17 12:30:01 +01:00
parent 569666fb82
commit 58b06f5d45
No known key found for this signature in database
2 changed files with 19 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
components/composer/composer.vue
View file

@ -6,7 +6,7 @@
<Input v-model:model-value="state.contentWarning" v-if="state.sensitive" <Input v-model:model-value="state.contentWarning" v-if="state.sensitive"
placeholder="Put your content warning here" /> placeholder="Put your content warning here" />
<Textarea :placeholder="chosenSplash" v-model:model-value="state.content" <Textarea id="text-input" :placeholder="chosenSplash" v-model:model-value="state.content"
class="!border-none !ring-0 !outline-none rounded-none p-0 max-h-full min-h-48 !ring-offset-0" class="!border-none !ring-0 !outline-none rounded-none p-0 max-h-full min-h-48 !ring-offset-0"
:disabled="sending" /> :disabled="sending" />
@ -122,6 +122,13 @@ const { Control_Enter, Command_Enter } = useMagicKeys();
const ctrlEnterSend = useSetting(SettingIds.CtrlEnterToSend); const ctrlEnterSend = useSetting(SettingIds.CtrlEnterToSend);
const fileInput = ref<HTMLInputElement | null>(null); const fileInput = ref<HTMLInputElement | null>(null);
onMounted(() => {
// Wait 0.3s for the dialog to open
setTimeout(() => {
document.getElementById("text-input")?.focus();
}, 300);
});
watch([Control_Enter, Command_Enter], () => { watch([Control_Enter, Command_Enter], () => {
if (sending.value || !ctrlEnterSend.value.value) { if (sending.value || !ctrlEnterSend.value.value) {
return; return;
@ -296,4 +303,4 @@ const visibilities = {
text: m.lucky_mean_robin_link(), text: m.lucky_mean_robin_link(),
}, },
}; };
</script> </script>

12
components/composer/dialog.vue
View file

@ -44,8 +44,11 @@ useListen("composer:quote", (note) => {
useListen("composer:close", () => { useListen("composer:close", () => {
open.value = false; open.value = false;
relation.value = null; relation.value = null;
// Unfocus the active element
activeElement.value?.blur();
}); });
const activeElement = useActiveElement();
const open = ref(false); const open = ref(false);
const relation = ref( const relation = ref(
null as { null as {
@ -57,7 +60,12 @@ const relation = ref(
</script> </script>
<template> <template>
<Dialog v-model:open="open" @update:open="o => { if (!o) { relation = null } }"> <Dialog v-model:open="open" @update:open="o => {
if (!o) {
relation = null; // Unfocus the active element
activeElement?.blur();
}
}">
<DialogContent :hide-close="true" <DialogContent :hide-close="true"
class="sm:max-w-xl max-w-full w-full grid-rows-[minmax(0,1fr)_auto] max-h-[90dvh] p-5 pt-6 top-0 sm:top-1/2 translate-y-0 sm:-translate-y-1/2"> class="sm:max-w-xl max-w-full w-full grid-rows-[minmax(0,1fr)_auto] max-h-[90dvh] p-5 pt-6 top-0 sm:top-1/2 translate-y-0 sm:-translate-y-1/2">
<DialogTitle class="sr-only"> <DialogTitle class="sr-only">
@ -71,4 +79,4 @@ const relation = ref(
<Composer :relation="relation ?? undefined" /> <Composer :relation="relation ?? undefined" />
</DialogContent> </DialogContent>
</Dialog> </Dialog>
</template> </template>