title: Puppeteer invoking onChange event handler not working
body: <p>Banging my head against this wall for a bit, hoping someone may have some advice.</p>
  
  <p>I am trying to invoke the onChange handler in a page loaded into Puppeteer.  While I am able to select the appropriate option within the select (verified by turning off headless) I am unable to get the event handler to run.</p>
  
  <p>1) Puppeteer provides the <a href="https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pageselectselector-values" rel="noreferrer">page.select()</a> method, which explicitly states</p>
  
  <blockquote>
    <p>"Triggers a change and input event once all the provided options have
    been selected"</p>
  </blockquote>
  
  <p>I am able to select the expected option, but the event handler does not fire</p>
  
  <pre><code>await page.select('select#venue', '40');
  </code></pre>
  
  <p>2) Using native javascript inside a page.evaluate() call to manually select the required option, then generate a new Event and manually using element.dispatchEvent(event) e.g.</p>
  
  <pre><code>document.querySelector('select#venue &gt; option:nth-child(4)').selected = "selected";
  
  const event = new Event('change', {bubbles: true});
  event.simulated = true;
  
  document.querySelector('select#venue').dispatchEvent(event));
  </code></pre>
  
  <p>3) Using jQuery inside a page.evaluate() call to manually select the required otpion, then trigger the event e.g.</p>
  
  <pre><code>$("select#venue").val(17).change();
  </code></pre>
  
  <p>Completely out of ideas folks, and thoughts appreciated!</p>