Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Popovers: triggers click and focus can't be combined #39010

Open
3 tasks done
coudrak opened this issue Aug 8, 2023 · 5 comments
Open
3 tasks done

Popovers: triggers click and focus can't be combined #39010

coudrak opened this issue Aug 8, 2023 · 5 comments
Labels

Comments

@coudrak
Copy link

coudrak commented Aug 8, 2023

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

@louismaximepiton
Copy link
Member

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.

@coudrak
Copy link
Author

coudrak commented Aug 16, 2023

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)

@louismaximepiton
Copy link
Member

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 ?

@coudrak
Copy link
Author

coudrak commented Aug 16, 2023

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...

@louismaximepiton
Copy link
Member

louismaximepiton commented Aug 16, 2023

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants