dblclick event does not fire on <option> elements

Confirmed Issue #10350929 • Assigned to Travis L.

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”

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

    Sign in