Bootstrap: Dismissible popover at next click with link inside ...stop to work fine

[jipexu]

Hi
Dismissible popover at the next click with link inside ...
[current dev version and popper.js]

The popover open fine (and dismiss fine).
But the link inside not work [except if you are very fast ...] that means if you click imediatly you can have a chance to get a working link ... if you wait some seconds the links are not working ...
it was not the case with tether.js and alpha-6...

https://codepen.io/jipexu/pen/Kvzvzp

where i am wrong ? some idea ?

[Johann-S]

I removed : data-trigger="focus" and it works fine, maybe that's because you used that attribute and it takes the focus, so your links cannot be clicked

More informations here : https://github.com/twbs/bootstrap/blob/v4-dev/docs/4.0/components/tooltips.md#options

[jipexu]

Thanks
yes but if we remove the data-trigger="focus" the popover is not more dismissible at the next click ...?

[Johann-S]

Indeed 🤔 for me it seems a bug

[patrickhlauke]

as an aside: popovers should ideally not be used for interactive content - for instance, this makes it completely unusable for keyboard users. It's probably worth noting this in the documentation.

[patrickhlauke]

as for the actual problem described here, this would likely require a modification of BS code to allow for clicks inside the popover, without them bubbling up further and closing the popover

[jipexu]

as an aside: popovers should ideally not be used for interactive content - for instance, this makes it completely unusable for keyboard users. It's probably worth noting this in the documentation.
@patrickhlauke

thank for the answer
i understand (and dont realize the lack for the keyboard user) but i though it was a very good way to use popover as a nice (rich) local menu ...
i continue to investigate to find a better html (perhaps) because i dont find really why this work before and no more with the dev version and popper.js (and some of our team member can not reproduce this problem ?..)

if we can use data-html ... the html must work inside with the dismiss at next clic ...
this problem remember me the early time of use of infowindow in google map api ...

[TGHI]

+1

I thought that "focus" would be the solution to manual triggers + closing on document click.

[MiikaL]

There may be reasons for not using popovers with interactive content, but this has been a working feature up until the official release.

I am using the popover as a list of notifications in the toolbar, and clicking on the notification in the popover should take the user to where they need to be. But with the latest release the popover is destroyed before the click on the link can be registered. What was changed in the latest release?

[MiikaL]

It seems that the solution to my problem at least is to also add a delay to the popover (in my case a "delay: 200" in popover creation), which will allow the click events to be handled before the popover is destroyed.

[vanillajonathan]

This prevents a form from being used inside a popover.

This is used in Gmail on the search field where if you click on a button you get a type of popover with advanced search options.