Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

BUG: listener registration not works due Select2

See original GitHub issue

I found Select2 preventing registered event listener to be called. There is duplicate issue to this but without any details or code samples.

Issue – onchange or addEventListener listener on form that employs Select2 is never called.

Example:

In example you can observe this:

There are six forms.
Three of them employs Select2 (first three).
Only one (first) form of first three ones with inline registration calls the listener.
Rest of the forms are the same as the first three except they don’t employ Select2. They serves verification purpose.

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
  <script>

        $(document).ready(function() {
          $('.stoppingPropagationElem').select2();
        });
    
        function onChange_Function(obj) {
    
          let text;
          if (obj.currentTarget != undefined) {
            text = obj.currentTarget.name;
          } else {
            text = obj;
          }
    
          document.body.appendChild(getPwithText(text));
        }
    
        function getPwithText(text) {
          let node = document.createElement("P");
          let textnode = document.createTextNode(text);
    
          node.appendChild(textnode);
    
          return node;
        }
    
        window.addEventListener("load", function() {
          document.forms["someForm2"].onchange = onChange_Function;
          document.forms["someForm3"].addEventListener("change", onChange_Function);
    
          document.forms["someForm5"].onchange = onChange_Function;
          document.forms["someForm6"].addEventListener("change", onChange_Function);
        });
  </script>
</head>

<body>
  <form name="someForm" onchange="onChange_Function(this.name)">
    <select class="stoppingPropagationElem">
      <option>1</option>
      <option>2</option>
      <option>3</option>
    </select>
  </form>
  <form name="someForm2">
    <select class="stoppingPropagationElem">
      <option>1</option>
      <option>2</option>
      <option>3</option>
    </select>
  </form>
  <form name="someForm3">
    <select class="stoppingPropagationElem">
      <option>1</option>
      <option>2</option>
      <option>3</option>
    </select>
  </form>
  <form name="someForm4" onchange="onChange_Function(this.name)">
    <select>
      <option>1</option>
      <option>2</option>
      <option>3</option>
    </select>
  </form>
  <form name="someForm5">
    <select>
      <option>1</option>
      <option>2</option>
      <option>3</option>
    </select>
  </form>
  <form name="someForm6">
    <select>
      <option>1</option>
      <option>2</option>
      <option>3</option>
    </select>
  </form>
</body>

</html>

StackOverflow: https://stackoverflow.com/questions/53304417/js-onchange-works-addeventlistener-does-not

JSFiddle: https://jsfiddle.net/azgsvuj5/.

Issue Analytics

State:
Created 5 years ago
Reactions:1
Comments:7 (1 by maintainers)

Top GitHub Comments

3reactions

stale[bot]commented, Jun 30, 2019

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

0reactions

asadakbarcommented, Feb 17, 2021

Why close this if it is a confirmed bug? Maybe stalebot needs to turn itself off if the “confirmed bug” label is applied so at least its clear to folks this is a continuing issue.

FWIW, I used the example in the makandra link provided by @orthener and updated it to use native dispatch and a few other tweaks.

jQuery.fn.enableNativeEvent = function(eventNames, convertedPropNames = []) {
  eventNames.forEach(eventName => {
    this.on(eventName, function($event) {
      if (!$event.originalEvent) {
        $event.preventDefault();
        const newName = `$:${eventName}`;
        const eventData = _.pick($event, convertedPropNames) // Uses lodash.pick
        const event = new CustomEvent(newName, 
          { detail: eventData, bubbles: true, cancelable: true  }
        )
        $event.target.dispatchEvent(event)
      }
    })
  })
  return this
}

// Usage
$(".select2able").select2().enableNativeEvent(["change.select2"], ["params"]);