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

View File

@ -8632,6 +8632,13 @@
"reasonCategory": "falseMatch",
"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",
"path": "sticker-creator/components/StickerFrame.js",