ChatUI icon indicating copy to clipboard operation
ChatUI copied to clipboard

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

Open vebdhuz opened this issue 2 years ago • 3 comments

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 (期望的结果是什么)

vebdhuz avatar Mar 30 '23 15:03 vebdhuz

@vebdhuz 兄弟问题解决了吗

yyqxjwxy avatar Mar 31 '23 09:03 yyqxjwxy

从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}
      />

little51 avatar Apr 30 '23 11:04 little51

没有定义msgRef 还是出现了 该问题

lang-wei-long-way avatar Jul 17 '25 06:07 lang-wei-long-way