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,21 +324,22 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
         id='compose-textarea'
       >
         {
-          !condensed &&
-          <Stack space={4} className='compose-form__modifiers'>
-            <UploadForm composeId={id} />
-            <PollForm composeId={id} />
+          !condensed && (
+            <Stack space={4} className='compose-form__modifiers'>
+              <UploadForm composeId={id} />
+              <PollForm composeId={id} />
 
-            <SpoilerInput
-              composeId={id}
-              onSuggestionsFetchRequested={onSuggestionsFetchRequested}
-              onSuggestionsClearRequested={onSuggestionsClearRequested}
-              onSuggestionSelected={onSpoilerSuggestionSelected}
-              ref={spoilerTextRef}
-            />
+              <SpoilerInput
+                composeId={id}
+                onSuggestionsFetchRequested={onSuggestionsFetchRequested}
+                onSuggestionsClearRequested={onSuggestionsClearRequested}
+                onSuggestionSelected={onSpoilerSuggestionSelected}
+                ref={spoilerTextRef}
+              />
 
-            <ScheduleFormContainer composeId={id} />
-          </Stack>
+              <ScheduleFormContainer composeId={id} />
+            </Stack>
+          )
         }
       </AutosuggestTextarea>
 

app/soapbox/hooks/index.ts

@@ -22,4 +22,4 @@ export { useRegistrationStatus } from './useRegistrationStatus';
 export { useSettings } from './useSettings';
 export { useSoapboxConfig } from './useSoapboxConfig';
 export { useSystemTheme } from './useSystemTheme';
-export { useTheme } from './useTheme';
+export { useTheme } from './useTheme';