javascriptjquerykendo-uikendo-multiselect

Click event not working correctly on Kendo Multi-Select wrapper (Only in FireFox)


I am having an odd problem with kendo multi-selects in FireFox.

I wrap a multiselect in a div, then attach a click event to that div wrapper. So, when the user clicks on the multiselect (the div wrapper), the click event fires, and the multiselect is enabled (initially disabled). This works fine in Chrome. But in FireFox, the click event is only fired when you click off to the right of the div wrapper, like in my picture I attached. In Chrome, if you click anywhere on the multiselect, the click event fires correctly...

This Dojo shows exactly what is happening. That dojo does the same thin. You can see it works fine in Chrome, but FireFox doesn't fire the click event unless you click on the right side of the multiselect...

enter image description here


Solution

  • I finally found a solution to this problem. It can be found In this dojo. I discovered most browsers will propagate events up through the DOM tree on disabled elements, but Firefox will not. So, there was no way of setting a click event to anything in the multi-select, or on a wrapper, etc... that would have worked.

    To get this to work, you add an extra div in the wrapper, like in the dojo. You set the wrapper to position: relative and the extra div contained in your wrapper (that also contains the multi-select) to position:absolute; left: 0; right: 0; top: 0; bottom: 0; then you show and hide that extra div as you 'disable' and 'enable' the multi-select (or whatever disabled element you want to enable).

    This Firefox behavior, and the solution I just mentioned, is also discussed in this Stackoverflow answer, with a working example in the dojo in my first link.