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, the selectionchange event is always triggered once, regardless of whether the <input> element is focused or not.
-
Firefox/Safari: The selectionchange event 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!
The
selectionchangeevent 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):
Do we need to align the expected behavior of this situation?
Thanks!