Question

I’m trying to implement a “custom” combobox options popup, so that near each option on the list i can place an icon / image.

My goal is to make this as unobtrusive as possible and make it look as close to a regular combo as possible, so, for Chrome and IE, the solution of grabbing the mouse and keyboard events that cause the standard popup to appear works fine:

@el.bind 'mousedown keydown keyup click', (e) =>
(...)
e.stopPropagation()
e.preventDefault()

This basically makes it so that the control is still there, looking native, and whenever the user clicks or focuses it, it shows up the “custom” list instead of the native one.

However, in firefox, as soon as the user clicks the combobox control (< select >), a popupshowing event is triggered, but i can’t find a way to cancel it before the popup with the < options > shows up, covering up my “custom” options display implementation.

The only information regarding this event i was able to find, was on the Mozilla XUL documentation.

Thanks in advance.

Answer 1

I looked at the source code and it doesn’t appear to be possible to cancel either the mouse event that opens the drop down or the popupshowing event (I don’t even know why that event is generated). However I think you might be able to capture the mouse event on a parent element and stop its propagation.