title: select2 doesn't trigger change event correctly
body: <p>I have a HTML form with a select element. However I'm using select2 library. I want to listen for form input changes. I have added a change event listener. However even when I change the option this event is not getting triggered. I have added trigger manually but still this change event is not getting called.</p>
  <p>form</p>
  <pre><code>&lt;form id=&quot;xform&quot;&gt;
  
  &lt;select id=&quot;xselect&quot;&gt;
    &lt;option value=&quot;A&quot; selected=&quot;selected&quot;&gt;A&lt;/option&gt;
    &lt;option value=&quot;B&quot;&gt;B&lt;/option&gt;
    &lt;option value=&quot;C&quot;&gt;C&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;input type=&quot;email&quot; class=&quot;input-text&quot; name=&quot;test&quot;  placeholder=&quot;&quot; value=&quot;test&quot;&gt;
  
  &lt;/form&gt;
  
  &lt;button onclick=&quot;trigger()&quot;&gt;change&lt;/button&gt;
  </code></pre>
  <p>js</p>
  <pre><code>$('#xselect').select2({
    placeholder: 'Select a letter'
  });
  
  var formFrom = document.querySelector('#xform');
  
  formFrom.addEventListener('change', function(e) {
    console.log('input changed ');
    $('#xselect').trigger('change');
  });
  
  function trigger() {
    $('#xselect').val('C');
    $('#xselect').trigger('change');
  }
  </code></pre>
  <p>Demo</p>
  <p><a href="https://jsfiddle.net/982zfnkL/6/" rel="nofollow noreferrer">https://jsfiddle.net/982zfnkL/6/</a></p>
  <p>Basically when I click the change button i expect to see &quot;input changed&quot; console log.</p>
  <p>Why is this happening ?</p>