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

ComposeForm: don't focus the input constantly, add usePrevious hook

Closes #1105

See merge request soapbox-pub/soapbox!1796

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) {
+    if (spoiler && !prevSpoiler) {
-      case true: focusSpoilerInput(); break;
+      focusSpoilerInput();
-      case false: focusTextarea(); break;
+    } else if (!spoiler && prevSpoiler) {
+      focusTextarea();
     }
   }, [spoiler]);
 

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';

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;
+};