Popovers: triggers click and focus can't be combined
Prerequisites
- [X] I have searched for duplicate or closed issues
- [X] I have validated any HTML to avoid common problems
- [X] I have read the contributing guidelines
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
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.
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)
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 ?
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...
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.
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?