Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
vebdhuz opened this issue Mar 30, 2023 · 2 comments

Comments

@vebdhuz
Copy link

vebdhuz commented Mar 30, 2023

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 vebdhuz changed the title 在手机端输入框聚焦的瞬间,消息位置会变化,会移动到输入框下方,被输入框遮挡 在手机端输入框聚焦的瞬间,消息列表的位置会变化,会移动到输入框下方,被输入框遮挡,就只能看到最上面的一条消息,上面全是空白 Mar 30, 2023
@yyqxjwxy
Copy link

@vebdhuz 兄弟问题解决了吗

@little51
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants