fix: [MessageContainer] scrollToEnd when focus

alibaba · Jul 20, 2022 · 320b2ec · 320b2ec
1 parent 8f2bbb4
commit 320b2ec
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/src/components/Composer/index.tsx b/src/components/Composer/index.tsx
@@ -12,7 +12,7 @@ import { SendButton } from './SendButton';
 import { Action } from './Action';
 import toggleClass from '../../utils/toggleClass';
 
-const FOCUSING_CLASS = 'S--focusing';
+export const CLASS_NAME_FOCUSING = 'S--focusing';
 
 export type InputType = 'voice' | 'text';
 
@@ -132,7 +132,7 @@ export const Composer = React.forwardRef<ComposerHandle, ComposerProps>((props,
   const handleInputFocus = useCallback(
     (e: React.FocusEvent<HTMLTextAreaElement>) => {
       clearTimeout(blurTimer.current);
-      toggleClass(FOCUSING_CLASS, true);
+      toggleClass(CLASS_NAME_FOCUSING, true);
       focused.current = true;
 
       if (onFocus) {
@@ -145,7 +145,7 @@ export const Composer = React.forwardRef<ComposerHandle, ComposerProps>((props,
   const handleInputBlur = useCallback(
     (e: React.FocusEvent<HTMLTextAreaElement>) => {
       blurTimer.current = setTimeout(() => {
-        toggleClass(FOCUSING_CLASS, false);
+        toggleClass(CLASS_NAME_FOCUSING, false);
         focused.current = false;
       }, 0);
 

diff --git a/src/components/MessageContainer/index.tsx b/src/components/MessageContainer/index.tsx
@@ -3,6 +3,7 @@ import React, { useState, useEffect, useRef, useCallback, useImperativeHandle }
 import { PullToRefresh, PullToRefreshHandle, ScrollToEndOptions } from '../PullToRefresh';
 import { Message, MessageProps } from '../Message';
 import { BackBottom } from '../BackBottom';
+import { CLASS_NAME_FOCUSING } from '../Composer';
 import canUse from '../../utils/canUse';
 import throttle from '../../utils/throttle';
 import getToBottom from '../../utils/getToBottom';
@@ -48,7 +49,6 @@ export const MessageContainer = React.forwardRef<MessageContainerHandle, Message
     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) => {
@@ -112,7 +112,11 @@ export const MessageContainer = React.forwardRef<MessageContainerHandle, Message
         return;
       }
 
-      if (lastMessage.position === 'right') {
+      if (
+        lastMessage.position === 'right' ||
+        document.body.classList.contains(CLASS_NAME_FOCUSING)
+      ) {
+        // 自己发的消息 或 输入框聚焦，则滚动到底部
         scrollToEnd({ force: true });
       } else if (isNearBottom(wrapper, 1)) {
         const animated = !!wrapper.scrollTop;
@@ -177,7 +181,6 @@ export const MessageContainer = React.forwardRef<MessageContainerHandle, Message
             {messages.map((msg) => (
               <Message {...msg} renderMessageContent={renderMessageContent} key={msg._id} />
             ))}
-            <div ref={bottomRef} />
           </div>
         </PullToRefresh>
         {showBackBottom && (