The onChange event of a select tag gets fired in some cases when the options are altered programmatically. This should not happen as the onChange event should only fire when the user actually changes the value himself.
Here is a tiny example (this took me a lot of time to isolate)
<html>
<head>
<script src="static/js/libs/easydropdown/easydropdown.js"></script>
</head>
<body>
<select id="OPT1">
<option value="E1">E1</option>
</select>
<script>
document.body.onload = ()=> {
document.getElementById('OPT1').addEventListener('change', function(){
alert("Shouldn't be called");
})
easydropdown.all()
document.getElementById('OPT1').remove(0) //remove the option
//add a new option, this will trigger an onChange and an alert will pop up
let opt = document.createElement("option");
opt.text = "TEST"
opt.value = "MODE3";
document.getElementById('OPT1').add(opt);
}
</script>
</body>
</html>
Basically, create a select tag with a option, remove the option and then add another option. This leads to the firing of the onChange event. The above snippet will pop an alert() whereas it shouldn't.
The onChange event of a select tag gets fired in some cases when the options are altered programmatically. This should not happen as the onChange event should only fire when the user actually changes the value himself.
Here is a tiny example (this took me a lot of time to isolate)
Basically, create a select tag with a option, remove the option and then add another option. This leads to the firing of the onChange event. The above snippet will pop an alert() whereas it shouldn't.