Merge branch 'compose-form-focus' into 'develop'

Compose: Don't focus on spoiler input on first render

See merge request soapbox-pub/soapbox!2659

app/soapbox/features/compose/components/compose-form.tsx

@@ -89,6 +89,7 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
 
   const [composeFocused, setComposeFocused] = useState(false);
 
+  const firstRender = useRef(true);
   const formRef = useRef<HTMLDivElement>(null);
   const spoilerTextRef = useRef<AutosuggestInput>(null);
   const autosuggestTextareaRef = useRef<AutosuggestTextarea>(null);
@@ -214,10 +215,13 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
   }, []);
 
   useEffect(() => {
-    if (spoiler && !prevSpoiler) {
-      focusSpoilerInput();
+    if (firstRender.current) {
+      focusTextarea();
+      firstRender.current = false;
     } else if (!spoiler && prevSpoiler) {
       focusTextarea();
+    } else if (spoiler && !prevSpoiler) {
+      focusSpoilerInput();
     }
   }, [spoiler]);
 
@@ -320,7 +324,7 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
         id='compose-textarea'
       >
         {
-          !condensed &&
+          !condensed && (
             <Stack space={4} className='compose-form__modifiers'>
               <UploadForm composeId={id} />
               <PollForm composeId={id} />
@@ -335,6 +339,7 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
 
               <ScheduleFormContainer composeId={id} />
             </Stack>
+          )
         }
       </AutosuggestTextarea>