feat: autofocus textarea on iOS

src/components/NotePostForm.tsx

@@ -1,4 +1,4 @@
-import { createSignal, createMemo, onMount, Show, For, type Component, type JSX } from 'solid-js';
+import { createSignal, createMemo, Show, For, type Component, type JSX } from 'solid-js';
 
 import { createMutation } from '@tanstack/solid-query';
 import ExclamationTriangle from 'heroicons/24/outline/exclamation-triangle.svg';
@@ -344,13 +344,6 @@ const NotePostForm: Component<NotePostFormProps> = (props) => {
     onEmojiSelect: handleEmojiSelect,
   }));
 
-  onMount(() => {
-    setTimeout(() => {
-      textAreaRef?.click();
-      textAreaRef?.focus();
-    }, 50);
-  });
-
   return (
     <div class="p-1">
       <Show when={props.replyTo != null}>

src/components/SideBar.tsx

@@ -93,7 +93,7 @@ const SideBar: Component = () => {
 
   createEffect(() => {
     if (formOpened() && textAreaRef != null) {
-      setTimeout(() => focusTextArea(), 100);
+      focusTextArea();
     }
   });
 

src/components/event/TextNote.tsx

@@ -23,13 +23,20 @@ export type TextNoteProps = {
 };
 
 const TextNote: Component<TextNoteProps> = (props) => {
+  let textAreaRef: HTMLTextAreaElement | undefined;
+
   const i18n = useTranslation();
   const { showProfile } = useModalState();
   const timelineContext = useTimelineContext();
 
   const [showReplyForm, setShowReplyForm] = createSignal(false);
   const closeReplyForm = () => setShowReplyForm(false);
-  const toggleReplyForm = () => setShowReplyForm((current) => !current);
+  const toggleReplyForm = () => {
+    setShowReplyForm((current) => !current);
+    if (showReplyForm() && textAreaRef != null) {
+      textAreaRef.focus();
+    }
+  };
 
   const event = createMemo(() => textNote(props.event));
 
@@ -113,6 +120,9 @@ const TextNote: Component<TextNoteProps> = (props) => {
         footer={
           <Show when={showReplyForm()}>
             <NotePostForm
+              textAreaRef={(el) => {
+                textAreaRef = el;
+              }}
               mode="reply"
               replyTo={props.event}
               onClose={closeReplyForm}