Picker control does not close [sometimes]

[pixelbucket-dev]

Hi,

I am experiencing an issue within nw.js (node webkit) where the picker control sometimes does not close after the mouse has been clicked out side of it. In that case there is now other way of getting this done other than closing the window or destroying the element.

Did this occur before, any idea what might cause this? I suspect some internal event handling issue.

One more bit of info: I am using the picker tool within UI-bootstrap accordions.

Thanks a lot.

[ruhley]

I have never used nw.js, are you able to share some code? That would help me greatly.

[pixelbucket-dev]

<accordion close-others="true">
<accordion-group is-open="graphsControls[$index].open" class="states" data-ng-repeat="(graphIndex, graph) in graphs">
                        <accordion-heading>
                            ...
                        </accordion-heading>
<div class="configGroup">
some other form-group divs
...
<div class="form-group">
<label class="control-label col-sm-2">Stroke colour:</label>                                
<div class="col-sm-2">
<color-picker ng-model="graph.stroke" color-picker-format="'hex8'" color-picker-alpha="false"></color-picker>
</div>
</div>
some other form-group divs
...
</div>
</accordion-group>
</accordion>

'graph' is taken from an ng-repeat iteration and is basically an object. The hex value is written as a string into graph.stroke.

The above accordion is nested inside another accordion but I don't believe that is really important.

[ido567]

I have the same issue (and i'm not using the 'nw.js' lib) Did you found the problem?

[ruhley]

@Nudelsieb @ido567 I cannot replicate your problem, so are you able to give me some environment information like OS, Browser, angular color picker version etc.

[pixelbucket-dev]

@ruhley my machine is Windows 7 64 bit and latest updates. nw.js uses chromium. According to the changelog (https://github.com/nwjs/nw.js/blob/master/CHANGELOG.md) it uses version 41.0.2272.76.

I don't know if this problem might be related to nw.js, but if @ido567 experiences the same issue and runs a different environment, then it may be a problem in color picker?

Thanks

[ido567]

I'v experienced the issue on both Windows and Linux (chrome and safari) I don't know what triggers it, but when the picker is stuck, nothing cannot remove it

[ruhley]

@Nudelsieb @ido567 Can you please uncomment Line 365 and try to reproduce it. If it is being hidden correctly you should see Color Picker: Document Click Event and Color Picker: Hide Event.

The only thing that I can think might be causing it is this if not being run.

[ido567]

I made the changes you asked, next time I will post the logs next time I will have the issue

[pixelbucket-dev]

@ruhley will do so, thanks. I will let you know how it turns out.

[pixelbucket-dev]

@ruhley The log is as follows when the picker gets stuck.

Color Picker: Document Click Event
Color Picker: Hide Event

Those two lines repeat over and over again every time I click in the document. However, the picker stays open.

Attached is also a screenshot.

[ido567]

Why did you close it? Did you fixed it?

[pixelbucket-dev]

@ido567 good point, didn't see it. I hope it's just a mistake ;-).

[ruhley]

@Nudelsieb Sorry to keep going back and forth like this but can you change the line

$scope.log('Color Picker: Hide Event'); to $scope.log('Color Picker: Hide Event', $scope.visible);,

and tell me what the output is again.

@ido567 I think Close and comment was accidentally clicked.

[pixelbucket-dev]

@ruhley I did. However, sometimes, when the picker gets stuck, there is no log.

I wonder about line 59:

if ($scope.find(evt.target).length === 0) {

When you click the picker first this if evaluates to "true" and therefore fires "$scope.hide();". This shouldn't happen since at the same time you also fire "$scope.show();". If you have a timing problem in the event order then it may be possible that you set visible to false shortly after it has been set to true. I found in general, that the "$scope.hide();" fires every time I click something in the document, hence the line stated above always evaluates to true. This can be any element, even buttons. You may need some more checks, say only fire hide if show has been fired before. I hope this makes sense.

[ruhley]

I have released v0.6.11 which hopefully fixes your problem. Please tell me how it goes.

[pixelbucket-dev]

Awesome work, thanks. I will see how it goes. Do I see it right that scope.destroy was fired in some cases and removed the click event?

[ido567]

Thanks! I'v updated the package, and will update if the problem will occur again

[ruhley]

Closing the issue now as I have not heard anything more. Feel free to open it again if the issue reappears.

[pixelbucket-dev]

So far I haven't noticed any problems, therefore many thanks for the fix, highly appreciated :).