Inconsistent selectionchange event behavior across browsers when the added input element is not focused #344
Description
The selectionchange event behaves inconsistently across browsers when a new <input> element is added to the document.
Specifically, there is a difference between Chrome and Firefox/Safari regarding whether the event is triggered when an <input> element is created and is not focused.
-
Chrome: When going to a page with a
<input>element, theselectionchangeevent is always triggered once, regardless of whether the<input>element is focused or not. -
Firefox/Safari: The
selectionchangeevent is not triggered unless the newly added element is focused like we manually choose it by the mouse.
see the below simple case (contributed by joe@udecode.dev in chromium issue@389368412):
<html>
<head>
<script>
let appendingInput = false;
const appendInput = () => {
appendingInput = true;
const input = document.createElement('input');
input.value = 'Bug: Adding an input element with a value to the DOM triggers selectionchange';
document.body.appendChild(input);
setTimeout(() => {
appendingInput = false;
});
};
document.addEventListener('selectionchange', (event) => {
// Only show the message in response to the bug
if (appendingInput) {
console.warn('selectionchange while appending input', event);
}
});
</script>
</head>
<body>
<button type="button" onclick="appendInput()">Append input</button>
</body>
</html>
Do we need to align the expected behavior of this situation?
Thanks!