bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

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

See merge request soapbox-pub/soapbox!2659
This commit is contained in:
marcin mikołajczak 2023-09-10 16:19:13 +00:00
commit 6319a4f65a
No known key found for this signature in database
2 changed files with 21 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
app/soapbox/features/compose/components/compose-form.tsx
View file

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

2
app/soapbox/hooks/index.ts
View file

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