问题
说一下问题出现的需求场景,需要点击出现一个下拉框,不同的下拉框对应不同的Modal
组件,包括显示账号信息,禁用/启用账号并填写原因等需求。就是用的Dropdown
组件+Modal
+Input.Textarea
组件来做,做完以后发现出了一点bug
。文本域中点击上下左右键,光标不随着移动。
解决办法
经过排查,发现Dropdown
内如果点击选中MenuItem
后,不使其回缩,会发现,在文本域中输入文字后,如果点击上下键,光标不动,但是MenuItem
的选中会跟着键盘事件移动。这说明MenuItem
或者Menu
对键盘事件也有监听。应该是这里做了什么事情导致文本域光标的移动失效了,那该怎么解决呢,最后发现在文本域上或者MenuItem
绑定onKeyDown
事件在其中阻止事件冒泡e.stopPropagation();
,就不会有影响了。
后来尝试了一下,这个问题并不是dropdown
引起的,而是Menu
,即使我们单独使用Menu
组件来实现与Modal
+文本域也会出现类似问题。阻止事件冒泡即可解决。
问题出现原因分析
猜测会出现这个问题的原因是,键盘事件在文本域中修改光标后,冒泡到Menu
中,根据点击的上下左右键,来移动MenuItem
的选中效果,此时会将焦点从文本域移到MenuItem
中,就会出现,上下左右键无法控制光标的问题。