移动端底部md-autocomplete唤起软键盘后立即消失问题排查
移动端点击屏幕底部angular-material md-autocomplete组件软键盘唤起后立即消失Bug
问题背景
遇到一个暂未定位根因的异常Bug:在移动端设备上,当用户点击位于屏幕底部、来自angular-material库的md-autocomplete组件时,软键盘唤起后会立即消失。该问题最初是在iOS端被发现,目前仅完成了Android端的调试。
已确认现象与排查结论
- 仅当输入框处于软键盘弹出后将要覆盖的屏幕区域时,才会触发该Bug
- 问题仅出现在
md-autocomplete组件上,基础原生HTML input输入框无此异常 - 触发过程中输入框会先触发
focus事件获得焦点,随后立即触发blur事件失焦 - 该问题与window的
resize事件无关:已注释所有resize事件触发的执行代码,问题仍可复现;且resize事件的派发时间晚于focus、blur事件,输入框失焦发生在resize事件触发之前 - 该问题与CSS样式无关:移除所有CSS文件后问题仍会出现
- 该问题在Cordova应用、移动端浏览器环境下均可复现
- 该问题在Chrome、Firefox、Opera浏览器中可复现,但Edge浏览器无此异常
- 触发过程中没有
dblclick事件派发
当前初步排查方向
已查阅Stack Overflow上相关问题的所有答复与评论,目前初步排查方向为:软键盘唤起时存在非resize事件触发的逻辑,导致DOM元素(尤其是md-autocomplete组件或其子节点)重排,但暂未找到DOM自动重排的相关逻辑。
补充更新
已在angular-material官方站点的
md-autocomplete演示页面复现该Bug(本人手机端Chrome浏览器上可稳定复现),确认该问题属于组件库本身的特定问题,后续将围绕组件库源码深入排查。
会持续跟进该问题的定位进展,也欢迎大家提供相关的排查思路与解决方案,在此提前致谢。
内容的提问来源于stack exchange,提问作者Echlo
相关产品推荐
相关产品推荐

