onChange event firing even when value is not changed

Open ret2jazzy opened this issue 6 years ago • 1 comments

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.

Apr 08 '19 01:04 ret2jazzy

@patrickkunka if you could take a look? I am not able to follow your code that closely to pinpoint the issue...

Jul 04 '19 05:07 ret2jazzy