fix: [MessageContainer] scrollToEnd support force

Author: akai

demo/src/demo/Chat.tsx

@@ -140,6 +140,7 @@ export default () => {
   const msgRef = React.useRef(null);
 
   window.appendMsg = appendMsg;
+  window.msgRef = msgRef;
 
   // 发送回调
   function handleSend(type: string, val: string) {
@@ -151,7 +152,9 @@ export default () => {
         position: 'right',
       });
 
-      setTyping(true);
+      setTimeout(() => {
+        setTyping(true);
+      }, 10);
 
       // 模拟回复消息
       setTimeout(() => {

src/components/Chat/index.tsx

@@ -184,7 +184,7 @@ export const Chat = React.forwardRef<HTMLDivElement, ChatProps>((props, ref) =>
 
   function handleInputFocus(e: React.FocusEvent<HTMLTextAreaElement>) {
     if (messagesRef && messagesRef.current) {
-      messagesRef.current.scrollToEnd({ animated: false });
+      messagesRef.current.scrollToEnd({ animated: false, force: true });
     }
     if (onInputFocus) {
       onInputFocus(e);

src/components/MessageContainer/index.tsx

@@ -44,20 +44,23 @@ export const MessageContainer = React.forwardRef<MessageContainerHandle, Message
 
     const [showBackBottom, setShowBackBottom] = useState(false);
     const [newCount, setNewCount] = useState(0);
-    const newCountRef = useRef(0);
+    const showBackBottomtRef = useRef(showBackBottom);
+    const newCountRef = useRef(newCount);
     const messagesRef = useRef<HTMLDivElement>(null);
     const scrollerRef = useRef<PullToRefreshHandle>(null);
     const bottomRef = useRef<HTMLDivElement>(null);
     const lastMessage = messages[messages.length - 1];
 
     const scrollToEnd = useCallback((opts?: ScrollToEndOptions) => {
       if (scrollerRef.current) {
-        scrollerRef.current.scrollToEnd(opts);
+        if (!showBackBottomtRef.current || (opts && opts.force)) {
+          scrollerRef.current.scrollToEnd(opts);
+        }
       }
     }, []);
 
     const handleBackBottomClick = () => {
-      scrollToEnd({ animated: false });
+      scrollToEnd({ animated: false, force: true });
       setNewCount(0);
       setShowBackBottom(false);
 
@@ -97,6 +100,10 @@ export const MessageContainer = React.forwardRef<MessageContainerHandle, Message
       newCountRef.current = newCount;
     }, [newCount]);
 
+    useEffect(() => {
+      showBackBottomtRef.current = showBackBottom;
+    }, [showBackBottom]);
+
     useEffect(() => {
       const scroller = scrollerRef.current;
       const wrapper = scroller && scroller.wrapperRef.current;
@@ -106,10 +113,10 @@ export const MessageContainer = React.forwardRef<MessageContainerHandle, Message
       }
 
       if (lastMessage.position === 'right') {
-        scrollToEnd();
+        scrollToEnd({ force: true });
       } else if (isNearBottom(wrapper, 1)) {
         const animated = !!wrapper.scrollTop;
-        scrollToEnd({ animated });
+        scrollToEnd({ animated, force: true });
       } else {
         setNewCount((c) => c + 1);
         setShowBackBottom(true);

src/components/PullToRefresh/index.tsx

@@ -26,6 +26,7 @@ export interface PullToRefreshProps {
 
 export interface ScrollToEndOptions {
   animated?: boolean;
+  force?: boolean;
 }
 
 interface PTRScrollToOptions extends ScrollToEndOptions {