bootstrap icon indicating copy to clipboard operation
bootstrap copied to clipboard

Popovers: triggers click and focus can't be combined

Open coudrak opened this issue 2 years ago • 6 comments

Prerequisites

Describe the issue

The documentation says : "How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. manual cannot be combined with any other trigger."

But if you set data-bs-trigger="click focus" the click trigger doesn't work, only the focus trigger works. I mean if you click again the button to close the popover, it doesn't close.

Bootstrap 5.3.0

Reduced test cases

Can take the example: https://getbootstrap.com/docs/5.0/components/popovers/#dismiss-on-next-click and for the red "Dismissable popover" button, replace data-bs-trigger="focus" to data-bs-trigger="click focus".

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

5.3.0

coudrak avatar Aug 08 '23 03:08 coudrak

Hey there,

Thanks a lot for your contribution. Just tried it on our main branch and it seems to work as intended. I think the issue you mention comes from the fact that you don't initialize the popover with the right trigger.

If I misunderstood something here, please make sure to provide a CodePen to better illustrate your issue.

louismaximepiton avatar Aug 16 '23 13:08 louismaximepiton

So I've just did a CodePen : https://codepen.io/drakou/pen/zYyOPYo with "click focus" combined. (click the button again doesn't close the popover)

coudrak avatar Aug 16 '23 14:08 coudrak

Thanks a lot for providing a CodePen!

In this case if you click twice, you still have the focus on th trigger so the popover still display. If you clicked an even number of time on the trigger and click elsewhere (or move the focus in another way) the popover disappear. I think it's the intended behavior. Am I missing something ?

louismaximepiton avatar Aug 16 '23 14:08 louismaximepiton

Ah, for me this is not a logical behavior... The click trigger used alone closes when clicked twice, so it should work the same even when combined with focus. Actually just what I want is to close the popover when clicked anywhere else, including the button...

coudrak avatar Aug 16 '23 14:08 coudrak

Yeah, I think Bootstrap doesn't provide the code but mention that we should Use the focus trigger to dismiss popovers on the user’s next click of an element other than the toggle element. (https://getbootstrap.com/docs/5.3/components/popovers/#dismiss-on-next-click). Including the button seems hard to me.

louismaximepiton avatar Aug 16 '23 14:08 louismaximepiton

Actually just what I want is to close the popover when clicked anywhere else, including the button...

Hi, this is exactly what I am looking for, any news regarding this topic, please?

vitek-rostislav avatar Jun 13 '25 15:06 vitek-rostislav