Firefox - jQuery dialog with modal affecting the input of the colorpicker

[mslkim]

If you place the colorpicker inside the dialog with modal enabled, you cannot click in the input box to change the color. See fiddle http://jsfiddle.net/9bLJK/1/

[bgrins]

Thanks for posting a fiddle with this case. To be clear, are you saying you can't click into the textbox and type in a new color? If so, which browser are you in (it seems to work for me in Chrome).

[mslkim]

I'm using Firefox

[bgrins]

Definitely something to do with modal. Since the sp-container is added outside of the modal, it appears to being prevented from focus. There is an exposed $("#picker").spectrum("container") getter to possibly move the actual colorpicker element around in the DOM to help out? Or is there possibly a way to override the behavior in jQuery UI?

[bgrins]

For instance, something like this: $('#dialog').append($("#picker").spectrum("container")); after both things are initialized? Not sure if this will work, but something like that could possibly fix the issue?

[bgrins]

Hmm I'm seeing some other focus problems in FF (not even inside of modal). I'll take a look at it and see if I can figure anything out.

[bgrins]

I've fixed the general text selection issue in FF by using user-select: -moz-none instead of user-select: none

[bgrins]

This works here (when not in dialog): http://jsfiddle.net/9bLJK/4/. Still not working with the modal, probably something to do with the modal overlay styling...

[Elkrose]

Still can't edit the textbox if its within a dialog in FireFox. I believe bgrins is on the right track about the modal.

[bgrins]

Updated the fiddle to latest version of jQuery UI and spectrum, still appears to be a problem: http://jsfiddle.net/9bLJK/10/

[dbeilharz]

I stumbled across the fix for this while trying to add this onto my own project. For some reason the dialog doesn't like the large number as the z-index on .sp-container, so I changed it to 9999 (or anything that is higher than the jquery ui) and it worked.
So basically in the spectrum.css change to
.sp-container {
z-index: 9999;
}

[bgrins]

@dbeilharz good observation. I narrowed it down an actual z-index value that it breaks on: 9999995. 9999994 and lower seems to work: http://jsfiddle.net/9bLJK/19/. Can you confirm this?

[dbeilharz]

@bgrins Yes, I didn't have time to test which z-index value it breaks on but in your jsfiddle and my project it does break on any number higher than 9999994. Thanks for the great colorpicker by the way, it was very easy to implement and has all the functionality I needed 👍

[bgrins]

This is fixed by: 0355f46

[ghost]

This seems to be an issue again with jQuery UI 1.10.3. I threw together an example much like your Fiddle and it works with 1.9.2, but if I swap it with 1.10.3 (full), I can't focus/edit the input.

EDIT:
If it helps, the culprit is the _allowInteraction function in the 1.10.3 Dialog widget:

_allowInteraction: function( event ) {
if ( $( event.target ).closest(".ui-dialog").length ) {
return true;
}

It works if I hack that function to also allow "sp-container":

if ( $( event.target ).closest(".ui-dialog").length || $(event.target).closest(".sp-container").length) {
return true;
}

Not sure what this would mean for spectrum... perhaps an option to specify a parent element for the picker container?

[bgrins]

Not sure what this would mean for spectrum... perhaps an option to specify a parent element for the picker container?

I'm not exactly sure. Do you mean wrapping it inside of a dialog, add adding the ui-dialog class to the container? You could already do the latter with (currently undocumented) className option. Can you post a link with the failing test case?

[ghost]

I can whip together a quick repro over the weekend if you need it. The issue is described here though:
http://api.jqueryui.com/dialog/#method-_allowInteraction

Since .sp-container isn't a child of the modal it falls under this scenario. The path of least resistance for me -- and maybe for spectrum as well -- was just to redefine the dialog widget to explicitly allow interaction with .sp-container:

$.widget("ui.dialog", $.ui.dialog, {
_allowInteraction: function () {
if ($(event.target).closest(".ui-dialog").length || $(event.target).closest(".sp-container").length) {
return true;
}
return !!$(event.target).closest(".ui-datepicker").length;
}
});

[miketheanimal]

I've had the same problem, chrome 36.0.1985.143 (sorry, not tested elsewhere), jquery 2.1.0, jqueryui 1.10.3. Based on digdugpooka 's comment and link I fixed the problem with:

    $.widget("ui.dialog", $.ui.dialog, {
        _allowInteraction: function (event) {
            if ( $(event.target).closest(".sp-container").length)
                return true ;
            return this._super(event) ;
        }
    });

[bgrins]

Thanks for tracking that down and sharing your solutions

[raRaRa]

I realize that this is an old issue, but I tried removing tabindex="-1" from the modal attributes and everything worked fine. I hope this is helpful for others.