dblclick event does not fire on <option> elements

Confirmed Issue #10350929 • Assigned to Aparna P.

Details

Author
Jake Z.
Created
Dec 30, 2016
Privacy
This issue is public.
Found in
  • Microsoft Edge
  • Internet Explorer
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

  1. Create a <select> element with some <option>'s.
  2. Attach dblclick listeners to said <option>'s.
  3. Double click any <option> to see that nothing is outputted to the console.

Sample HTML:

<select id="example" multiple>
  <option>Foo</option>
  <option>Bar</option>
</select>

Sample JavaScript:

Array.from(document.querySelectorAll('#example option')).forEach(element => {
    element.addEventListener('dblclick', event => {
      console.log(`onDblClick option: ${event.currentTarget.value}`);
    })
});

It is worth noting that if you add the event listener to the <select> element itself, the event will fire when double-clicking an <option>. This bug appears to be IE/Edge-specific, as it does not occur in Firefox nor Chrome. The workaround is pretty easy, but it took me a while to realize that this was due to the event being added to an <option>.

See this JSFiddle for a live example. You will note that in Chrome/Firefox, two events will fire off: one for the <select> and one for the <option>. In IE/Edge, only the event for <select> will be fire.

There are a couple relevant Stackoverflow posts about this too.

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Brad E.”

      Changed Assigned To to “Travis L.”

      Changed Status to “Confirmed”

      Changed Assigned To from “Travis L.” to “Aparna P.”

    You need to sign in to your Microsoft account to add a comment.

    Sign in