Edge浏览器中<datalist>展开时回车键无法触发事件的问题咨询

我最近碰到一个头疼的问题：在Microsoft Edge浏览器里，当<datalist>的下拉建议框处于显示状态时，按下回车键完全不会触发任何绑定的键盘事件（比如keydown或keyup）。但同样的代码在Chrome里却能正常工作，回车键可以触发事件并执行后续的验证逻辑。

问题详情 #

当使用<datalist>配合输入框时，Edge的表现和预期完全不符：

• 预期行为：输入部分匹配的内容（比如输入"Opt"，没有完全匹配任何<datalist>选项），按下回车键应该触发预设的验证逻辑，弹出“Invalid Input”提示。
• 实际行为：只要<datalist>的建议框展开着，按下回车键就毫无反应，绑定的keydown事件根本不会被触发，后续的验证或处理逻辑完全无法执行。

复现步骤 #

• 创建一个包含<input>和<datalist>的HTML文件，给输入框绑定监听回车键的keydown事件；
• 在Microsoft Edge浏览器中打开这个文件；
• 点击输入框，输入部分匹配的内容（比如"Opt"），此时<datalist>的建议框会自动显示；
• 按下回车键，观察控制台和页面是否有预期的反应。

示例代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Datalist Enter Key Issue</title>
</head>
<body>
    <input list="options" id="inputField">
    <datalist id="options">
        <option value="Option 1"></option>
        <option value="Option 2"></option>
        <option value="Option 3"></option>
        <option value="Option 4"></option>
    </datalist>

    <script>
        document.getElementById("inputField").addEventListener("keydown", function(event) {
            if (event.key === "Enter") {
                console.log("Enter key pressed");
                if (!this.value) {
                    alert("Invalid Input");
                }
            }
        });
    </script>
</body>
</html>

我的疑问 #

请问这是Edge浏览器对<datalist>的处理bug吗？有没有已知的修复方案或者可行的 workaround 能解决这个问题？

备注：内容来源于stack exchange，提问作者Shivanandan D N