Don't scroll to the bottom of story replies

This commit is contained in:
Alvaro 2022-09-22 14:18:26 -06:00 committed by GitHub
parent 004abd44b5
commit 77bf3a8669
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 3 deletions

View File

@ -136,6 +136,7 @@ export const StoryViewsNRepliesModal = ({
}: PropsType): JSX.Element | null => { }: PropsType): JSX.Element | null => {
const containerElementRef = useRef<HTMLDivElement | null>(null); const containerElementRef = useRef<HTMLDivElement | null>(null);
const inputApiRef = useRef<InputApi | undefined>(); const inputApiRef = useRef<InputApi | undefined>();
const shouldScrollToBottomRef = useRef(false);
const [bottom, setBottom] = useState<HTMLDivElement | null>(null); const [bottom, setBottom] = useState<HTMLDivElement | null>(null);
const [messageBodyText, setMessageBodyText] = useState(''); const [messageBodyText, setMessageBodyText] = useState('');
const [showReactionPicker, setShowReactionPicker] = useState(false); const [showReactionPicker, setShowReactionPicker] = useState(false);
@ -164,14 +165,15 @@ export const StoryViewsNRepliesModal = ({
strategy: 'fixed', strategy: 'fixed',
}); });
let composerElement: JSX.Element | undefined;
useEffect(() => { useEffect(() => {
if (replies.length) { if (replies.length && shouldScrollToBottomRef.current) {
bottom?.scrollIntoView({ behavior: 'smooth' }); bottom?.scrollIntoView({ behavior: 'smooth' });
shouldScrollToBottomRef.current = false;
} }
}, [bottom, replies.length]); }, [bottom, replies.length]);
let composerElement: JSX.Element | undefined;
if (canReply) { if (canReply) {
composerElement = ( composerElement = (
<> <>
@ -204,6 +206,7 @@ export const StoryViewsNRepliesModal = ({
onPickEmoji={insertEmoji} onPickEmoji={insertEmoji}
onSubmit={(...args) => { onSubmit={(...args) => {
inputApiRef.current?.reset(); inputApiRef.current?.reset();
shouldScrollToBottomRef.current = true;
onReply(...args); onReply(...args);
}} }}
onTextTooLong={onTextTooLong} onTextTooLong={onTextTooLong}

View File

@ -8632,6 +8632,13 @@
"reasonCategory": "falseMatch", "reasonCategory": "falseMatch",
"updated": "2018-09-19T21:59:32.770Z" "updated": "2018-09-19T21:59:32.770Z"
}, },
{
"rule": "React-useRef",
"path": "ts/components/StoryViewsNRepliesModal.tsx",
"line": " const shouldScrollToBottomRef = useRef(false);",
"reasonCategory": "usageTrusted",
"updated": "2022-09-22T03:07:22.153Z"
},
{ {
"rule": "React-useRef", "rule": "React-useRef",
"path": "sticker-creator/components/StickerFrame.js", "path": "sticker-creator/components/StickerFrame.js",