From 58b06f5d456130d9661b998514bd811b9821e79b Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Tue, 17 Dec 2024 12:30:01 +0100
Subject: [PATCH] fix: :bug: Automatically focus composer text input when
 opened

---
 components/composer/composer.vue | 11 +++++++++--
 components/composer/dialog.vue   | 12 ++++++++++--
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/components/composer/composer.vue b/components/composer/composer.vue
index 7a4a69a..6e177df 100644
--- a/components/composer/composer.vue
+++ b/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>
\ No newline at end of file
+</script>
diff --git a/components/composer/dialog.vue b/components/composer/dialog.vue
index 86213ff..102d419 100644
--- a/components/composer/dialog.vue
+++ b/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>
\ No newline at end of file
+</template>