Can updating an element inside that element’s oninput handler trigger an infinite loop? I tested the following in Firefox. It does not trigger the event, but I want to know if I can expect all browsers to behave this way.
<html>
<body>
<div id="editable" contenteditable="true">Original content</div>
<script>
const editableDiv = document.getElementById('editable');
editableDiv.addEventListener('input', function(event) {
// In Firefox, this does not trigger an infinite loop
editableDiv.innerText += "!"
});
</script>
</body>
</html>
According to MDN (emphasis mine):
The
inputevent fires when the value of an<input>,<select>, or<textarea>element has been changed as a direct result of a user action (such as typing in a textbox or checking a checkbox). The event also applies to elements with contenteditable enabled…
What exactly does “direct result of a user action* mean, and could it include setting the .innerText or .innerHTML of the element? The UI Events spec is ambiguous.
Is this expected behavior explicitly describe somewhere?