ChatUI
ChatUI copied to clipboard
在手机端输入框聚焦的瞬间,消息列表的位置会变化,会移动到输入框下方,被输入框遮挡,就只能看到最上面的一条消息,上面全是空白
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 (重现步骤)
- 聚焦输入框
- 在手机端输入框聚焦的瞬间,消息位置会变化,会移动到输入框下方,被输入框遮挡
Link to minimal reproduction (最小化重现链接)
Expected behavior (期望的结果是什么)
@vebdhuz 兄弟问题解决了吗
从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}
/>
没有定义msgRef 还是出现了 该问题