Clicking outside picker doesnt close it when called from floated element

[primvla]

It has some problems with areas where outside click doesn't close the picker, that is, when the picker is called from floated content. Firefox 48 on linux.

[mscreenie]

+1

[PitPik]

Hi @primvla and @mscreenie ,
I guess I need some example to be able to reproduce your problems. Can't find this problem when I make the container float or position fixed... I can just guess.
Maybe the option "body" might help. The default for "options.body" is document.body and that's where the "mousedown" event handler is installed. I can imagine that setting it to "window" might help.

Other than that you might want to set the width and height of the document.body to it max. In the default setting he body listens to a mousedown but if it doesn't cover the browser screen it doesn't work. But better first try to set the "body" to window...

[mscreenie]

Is it possible to set multiple containers. As I have an iframe and the events do not recurse down into it.

[PitPik]

Hi @mscreenie , so if you need to deal with iFrames you might want to set an event listener in your iFrame as well:

// make an instance
var myColorPicker = $('.color').colorPicker();
// add listener to iframes...
$('iframe').contents().on('touchstart.tcp mousedown.tcp pointerdown.tcp', function(e) {
    myColorPicker.colorPicker.toggle();
});

This listens to pointer activity inside an iFrame and handles to close the picker from there as clicking there also means that you didn't click on the picker nor inside a input field.

If you ever have to deal with darg&drop over iFrames you might experience the same problem as your event listener stops working over the iFrame...