From 6b57b62b3849df48bfb83552b34b216915175b0d Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 19 Sep 2022 13:55:08 -0500
Subject: [PATCH] ComposeForm: don't focus the input constantly, add
 usePrevious hook

---
 .../features/compose/components/compose-form.tsx    | 10 ++++++----
 app/soapbox/hooks/index.ts                          |  1 +
 app/soapbox/hooks/usePrevious.ts                    | 13 +++++++++++++
 3 files changed, 20 insertions(+), 4 deletions(-)
 create mode 100644 app/soapbox/hooks/usePrevious.ts

diff --git a/app/soapbox/features/compose/components/compose-form.tsx b/app/soapbox/features/compose/components/compose-form.tsx
index 35470c4cf..b9968ad3e 100644
--- a/app/soapbox/features/compose/components/compose-form.tsx
+++ b/app/soapbox/features/compose/components/compose-form.tsx
@@ -18,7 +18,7 @@ import AutosuggestInput, { AutoSuggestion } from 'soapbox/components/autosuggest
 import AutosuggestTextarea from 'soapbox/components/autosuggest_textarea';
 import Icon from 'soapbox/components/icon';
 import { Button, Stack } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector, useCompose, useFeatures } from 'soapbox/hooks';
+import { useAppDispatch, useAppSelector, useCompose, useFeatures, usePrevious } from 'soapbox/hooks';
 import { isMobile } from 'soapbox/is_mobile';
 
 import EmojiPickerDropdown from '../components/emoji-picker/emoji-picker-dropdown';
@@ -76,6 +76,7 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
   const features = useFeatures();
 
   const { text, suggestions, spoiler, spoiler_text: spoilerText, privacy, focusDate, caretPosition, is_submitting: isSubmitting, is_changing_upload: isChangingUpload, is_uploading: isUploading, schedule: scheduledAt } = compose;
+  const prevSpoiler = usePrevious(spoiler);
 
   const hasPoll = !!compose.poll;
   const isEditing = compose.id !== null;
@@ -206,9 +207,10 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
   }, []);
 
   useEffect(() => {
-    switch (spoiler) {
-      case true: focusSpoilerInput(); break;
-      case false: focusTextarea(); break;
+    if (spoiler && !prevSpoiler) {
+      focusSpoilerInput();
+    } else if (!spoiler && prevSpoiler) {
+      focusTextarea();
     }
   }, [spoiler]);
 
diff --git a/app/soapbox/hooks/index.ts b/app/soapbox/hooks/index.ts
index 82ce41321..32413dd8f 100644
--- a/app/soapbox/hooks/index.ts
+++ b/app/soapbox/hooks/index.ts
@@ -8,6 +8,7 @@ export { useFeatures } from './useFeatures';
 export { useLocale } from './useLocale';
 export { useOnScreen } from './useOnScreen';
 export { useOwnAccount } from './useOwnAccount';
+export { usePrevious } from './usePrevious';
 export { useRefEventHandler } from './useRefEventHandler';
 export { useSettings } from './useSettings';
 export { useSoapboxConfig } from './useSoapboxConfig';
diff --git a/app/soapbox/hooks/usePrevious.ts b/app/soapbox/hooks/usePrevious.ts
new file mode 100644
index 000000000..89282d6f7
--- /dev/null
+++ b/app/soapbox/hooks/usePrevious.ts
@@ -0,0 +1,13 @@
+import { useRef, useEffect } from 'react';
+
+/** Get the last version of this value. */
+// https://usehooks.com/usePrevious/
+export const usePrevious = <T>(value: T): T | undefined => {
+  const ref = useRef<T>();
+
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+
+  return ref.current;
+};
\ No newline at end of file