From c942a101ec300e317de2adcc294a5c7c0a437119 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sun, 10 Sep 2023 16:49:48 +0200
Subject: [PATCH] Compose: Don't focus on spoiler input on first render
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 .../compose/components/compose-form.tsx       | 35 +++++++++++--------
 app/soapbox/hooks/index.ts                    |  2 +-
 2 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/app/soapbox/features/compose/components/compose-form.tsx b/app/soapbox/features/compose/components/compose-form.tsx
index ceea75951..ad67ff5d5 100644
--- a/app/soapbox/features/compose/components/compose-form.tsx
+++ b/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>
 
diff --git a/app/soapbox/hooks/index.ts b/app/soapbox/hooks/index.ts
index 1da5fb9e4..98d600547 100644
--- a/app/soapbox/hooks/index.ts
+++ b/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';
\ No newline at end of file
+export { useTheme } from './useTheme';