在手机端输入框聚焦的瞬间，消息列表的位置会变化，会移动到输入框下方，被输入框遮挡，就只能看到最上面的一条消息，上面全是空白

[vebdhuz]

Version information (版本信息)

• ChatUI or ChatUI Pro? ChatUI
• ChatUI Version:2.4.2
• React Version:18.0.28
• OS Version: 红米手机
• Browser Version:小米系统自带浏览器

Describe the bug (描述问题) 在手机端输入框聚焦的瞬间，消息位置会变化，会移动到输入框下方，被输入框遮挡 Steps To Reproduce (重现步骤)

1. 聚焦输入框
2. 在手机端输入框聚焦的瞬间，消息位置会变化，会移动到输入框下方，被输入框遮挡

Link to minimal reproduction (最小化重现链接)

Expected behavior (期望的结果是什么)

[yyqxjwxy]

@vebdhuz 兄弟问题解决了吗

[little51]

从Chat的源码（node_modules\@chatui\core\lib\components\Chat\index.js）中看，当input获得焦点时，将执行以下代码：

 function handleInputFocus(e) {
    if (messagesRef && messagesRef.current) {
      messagesRef.current.scrollToEnd({
        animated: false,
        force: true
      });
    }

    if (onInputFocus) {
      onInputFocus(e);
    }
  }

作者本意是为了避免输入法弹出遮挡聊天记录，所以将message框内容滚动到底，但在实际运行时，会出现问题。彻底解决办法是改上面的代码。 有个略为改善一下的方法，就是复写Chat的onInputFocus事件，虽然上面还是空白，但输入法弹出时，聊天记录不至于被输入法挡住（如果只有一条聊天记录，原来可能只能显示一半或者干脆不显示）。

function App() {
  ... ...
  const msgRef = React.useRef(null);
  ... ...
  function onInputFocus(e){
    if (msgRef && msgRef.current) {
      msgRef.current.scrollToEnd() ;
    }
  }
  ... ...
      <Chat
        ... ...
        messagesRef={msgRef}
        ... ...
        onInputFocus={onInputFocus}
      />