Question

我得到了这种奇怪的行为。最奇怪的部分是它随机发生。以下是对所发生情况的描述：

我有一个带有受控输入的React应用程序，当显示组件时，对此输入进行焦点调整。有时，在Chrome中的Android上（无法在Firefox中重现它），当页面加载时键盘打开（关注输入后），但是当我输入时，没有任何反应。离开/重新打开键盘不会改变任何事情，但离开标签并返回它会使一切正常。

我在文档上监视devtools的事件，看来当它无法正常工作时我只会收到这些事件：

keydown（KeyboardEvent）
keyup（KeyboardEvent）

在它工作的时候，我会得到这些：

keydown（KeyboardEvent）
input（InputEvent）
keyup（KeyboardEvent）

因此缺少输入事件。有没有人知道什么可以导致输入事件不被生成？

由于它在一个大型项目中，我几乎无法提供可重现的代码。但输入使用以下代码在React组件中呈现：

<input
    value={this.props.query}
    onChange={this.onQueryChange}
    ref={focus}
    placeholder='Type your search here'
/>

专注于渲染的输入（删除它不会删除错误）：

const focus = input => {
    if (input) {
        const hasFocus = input === document.activeElement

        input.focus()

        if (!hasFocus) {
            input.select()
        }
    }
}

欢迎任何线索......谢谢。

Answer 1

我弄明白自己问题的来源。如果可以帮助其他人，我会发布答案......

此问题来自Chrome中的错误（似乎是<61），当网站前面存在基本身份验证时发生。有关此错误的更多信息，请访问：https://bugs.chromium.org/p/chromium/issues/detail?id=740652

我无法在本地重现该错误（我没有在本地启用basic-auth），但是一旦启用它，就会出现错误。

由于我的staging env中只有basic-auth，所以我不需要为此找到解决方法。但是如果需要的话，在bug票据中描述了一些线索......

Android Chrome上没有针对React控件输入生成的inputevent

1 个答案: