0

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

Tyler Dahle
  • 817
  • 1
  • 8
  • 37
  • I find in chrome in the dojo the clicking appears to be the same as in firefox. The possible issue is the 'non-responsive' region belongs to a component element [ div.k-multiselect-wrap input.k-input.k-readonly ] The dev tools shows that input input is ~209 pixel wide and is the 'dead zone'. I would guess there is a preventDefault() going on somewhere in the component thus the click never makes it out to your wrapper. – Richard Dec 14 '17 at 22:13
  • Hmmm... I have tried to bind click events to the element you mentioned, and some others but can't get anything to go through. But it is also odd you are having that same issue in Chrome. Chrome has always worked as desired for me. Only ran into this issue in FireFox – Tyler Dahle Dec 14 '17 at 22:40

2 Answers2

0

Tyler:

Try this approach.

Standard JavaScript eventing is bubble up, which means an event propagates from the innermost to the outermost elements. You can force the reverse by installing a custom event listener with the useCapture argument set to true. See addEventListener.

The reverse means you can cause your wrapper to experience the click event first. The event handler for the click would enable the kendo multiselect and remove itself from listening. These actions would be equivalent to what you want to do.

// function that turns on multiselect and then removes itself from listening
function multiselectEnabler() {
    $('#multiSelector').data('kendoMultiSelect').enable(true);
    $('#multiSelectWrapper')[0].removeEventListener( 'click', multiselectEnabler );
}

$('#multiSelectWrapper')[0].addEventListener( 'click', multiselectEnabler, true);

/* Your original code that is no longer needed  
$('#multiSelectWrapper').on('click', function(){
  kendoConsole.log('Activating MultiSelect');
    $('#multiSelector').data('kendoMultiSelect').enable(true);
});
$('#multiSelectWrapper input.k-input').on('click', function(){
    kendoConsole.log('Clicking on multiSelect');
});
*/
Richard
  • 25,390
  • 3
  • 25
  • 38
  • This unfortunately did not seem to work either. Even setting the useCapture to true. I tried doing the addEventListener on multiple elements inside the wrapper that are part of the multiselect with no luck. I tried with .on() and setting 'input.k-input' as the selector argument and that stopped it from working completely. – Tyler Dahle Dec 15 '17 at 16:14
  • In short, at this time I don't recommend Firefox and Dojo combination. Why? try copying your Dojo code to a local machine file (myDojo.html) and browse that in Firefox. You should find that both your original way (I did not test local version) and the event listener way (I did test local vesion) work and work quickly. I tried debugging the Dojo page in FireFox and performance is horrifically slow -- also, debugger; points broke but showed no code!!. My guess is that, at this time, FireFox (57.0.2) and Kendo Dojo don't work well together or confound each other after a little while. – Richard Dec 15 '17 at 17:02
  • I noticed that it was horribly slow in firefox as well. But trying the event listener way in my application still is not working :(. I ended up submitting a ticket to Kendo Support as it seems this may be an issue with their widget setup, as this should work... But at this point I am out of things to try :( – Tyler Dahle Dec 15 '17 at 17:10
0

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.

Tyler Dahle
  • 817
  • 1
  • 8
  • 37