当虚拟键盘出现在移动设备上时，移动设备下拉菜单关闭

Question

我在React中有一个下拉菜单，可以通过汉堡包按钮（仅在移动设备上）进行切换。当用户在菜单外点击时，我想使其关闭，所以我添加了一个eventListener。这是它的代码：

toggleRespDropDown = () => {
// short function for getElementById
    var dd = this.getE('navdd');
    var handler = function(e){
        if(dd.contains(e.target)) {
        } else {
            dd.style.display = 'none';
            document.removeEventListener('click', handler, false)
        }
    }
    if(dd.style.display !== 'flex') {
        dd.style.display = 'flex';
        document.addEventListener('click', handler, false)
    } else {
        dd.style.display = 'none';
        document.removeEventListener('click', handler, false)
    }
}

它可以正常工作，但是下拉菜单包含两个用于输入用户名和密码的输入，以使用户能够登录。在移动设备上，每当我点击其中一个输入字段时，当出现Android键盘时，下拉菜单关闭。在devTools中的Chrome中不会发生这种情况（它不使用虚拟键盘）。我不知道是什么触发了菜单的关闭。欢迎任何建议。