Don't scroll to the bottom of story replies
This commit is contained in:
parent
004abd44b5
commit
77bf3a8669
|
@ -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}
|
||||||
|
|
|
@ -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",
|
||||||
|
|
Loading…
Reference in New Issue