Colorpicker closing after selecting a color, when another picker is open

[Josh Nicholson]

Description

Colorpicker closes on any click when you have navigated/clicked from another open colorpicker

Context

• bootstrap-colorpicker version: 3.1.2
• bootstrap version: 4.2.1
• jQuery version: 3.4.1
• Browser name and version: Chrome 80.0.3987.149
• Operative System name an version: Windows 10

Expected behavior

1. Have two colorpickers created on the page, but not shown
2. Open one of them and select a color
3. Whilst still having the first one open, click the element that will show the second colorpicker. The first colorpicker will now close and the second one will open.
4. Click anywhere on the second colorpicker and remains open, and can still be interacted with

Actual behavior

1. Have two colorpickers created on the page, but not shown
2. Open one of them and select a color
3. Whilst still having the first one open, click the element that will show the second colorpicker. The first colorpicker will now close and the second one will open.
4. Click anywhere on the second colorpicker and it will close (unexcepted behaviour, it should stay open)

It should only close when the user has clicked outside of the second colorpicker.
It works correctly if you click outside of the first colorpicker anywhere on the page where another colorpicker won't be shown.

Live Example

Couldn't get jsfiddle to work with the links provided for a template.
Just create two input which each have a colorpicker.
Click on one to get the corresponding colorpicker to open.
Then click on the other input whilst the first colorpicker is still shown.
Then click anywhere on the second colorpicker and it will close

[Javi Aguilar]

This is expected behavior. The same happens with browser's HTML select elements (combobox): If you use one, the other is collapsed.

[Josh Nicholson]

Sorry thats not what I was getting at.

Let me try to explain it again.

Given two dialogue boxes that each open separate colourpicker instances, clicking one dialogue box and choosing a colour, then immediately clicking into the other dialogue box, closes the first colourpicker instance (expected behaviour) and then opens and immediately closes the second colourpicker instance before allowing you to choose a colour (unexpected behaviour).

This is a bug.

I can try and record whats happening if you are still unsure.

[Mac Duy Hai]

@itsjavi This is reproducible on the demo page as well: https://itsjavi.com/bootstrap-colorpicker/tutorial-Basics.html

Repro steps;

1. Click on a colorpicker
2. Click on another colorpicker

As you say it's expected is that the first color picker is closed. All good here.

However, what's not expected is that as soon as you interact with the new colorpicker, it closes immediately after that interaction. The expected behaviour is for it to stay open.

Note that this does not happen when popover.animated = false, however turning off animation causes other problems, like colorpicker not opening after it has been closed.

It's possible it might be a bug in popover, any thoughts on potential causes are welcome.

Thanks!

[Mac Duy Hai]

For your convenience, I've recorded the bug here: https://drive.google.com/file/d/1hbuxS7TpPK17wjwO-WYEjW-g0x5Mac0Z/view

[Javi Aguilar]

Thanks for the example, it's clearer now. I will reopen the issue. @macduy