fix: 🐛 Automatically focus composer text input when opened

components/composer/composer.vue

@@ -6,7 +6,7 @@
     <Input v-model:model-value="state.contentWarning" v-if="state.sensitive"
         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"
         :disabled="sending" />
 
@@ -122,6 +122,13 @@ const { Control_Enter, Command_Enter } = useMagicKeys();
 const ctrlEnterSend = useSetting(SettingIds.CtrlEnterToSend);
 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], () => {
     if (sending.value || !ctrlEnterSend.value.value) {
         return;
@@ -296,4 +303,4 @@ const visibilities = {
         text: m.lucky_mean_robin_link(),
     },
 };
-</script>
+</script>

components/composer/dialog.vue

@@ -44,8 +44,11 @@ useListen("composer:quote", (note) => {
 useListen("composer:close", () => {
     open.value = false;
     relation.value = null;
+    // Unfocus the active element
+    activeElement.value?.blur();
 });
 
+const activeElement = useActiveElement();
 const open = ref(false);
 const relation = ref(
     null as {
@@ -57,7 +60,12 @@ const relation = ref(
 </script>
 
 <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"
             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">
@@ -71,4 +79,4 @@ const relation = ref(
             <Composer :relation="relation ?? undefined" />
         </DialogContent>
     </Dialog>
-</template>
+</template>