Problem Statement
When using the <datalist> element in an input field in Microsoft Edge, pressing the Enter key does not trigger any event while the datalist options are displayed.
Steps to Reproduce
- Create an HTML file with an
<input>field that uses a<datalist>for suggestions. - Attach an event listener to detect when the Enter key is pressed.
- Open the file in Microsoft Edge.
- Click on the input field, type a partial value (e.g.,
"Opt"), and press Enter while the datalist suggestions are visible.
Expected Behavior
If the user types a partial value that does not match an option (e.g., "Opt"), pressing Enter should trigger validation, showing an "Invalid Input" message.
Actual Behavior in Edge
- When the datalist options are displayed, pressing Enter does nothing—no event is fired. The expected validation or event handling does not occur.
Example Code
<!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>
Working in Chrome but Not in Edge
- This works as expected in Chrome (the Enter key fires the event).
- In Edge, the Enter key seems to be ignored when the datalist dropdown is open.
Question
Is there a known workaround or fix for this behavior in Edge? Is it a bug in Edge's handling of <datalist>?
inputorchangehandler instead?inputandchangeas well. It didn't work in the edge browser.