Simon Simon - 7 months ago 69
Javascript Question

Bootstrap popover manual close requires two clicks to reopen

I've got a Bootstrap popover which contains an element with JS that when clicked, closes the popover using the manual method as shown on the Bootstrap website, i.e.

$('#element').popover('hide')


However, it then takes two clicks on the element the popover is opened from to re-open it. It's as if it still thinks the popover is on show and so the first click is to toggle it closed and the second click then toggles it open again. Does anyone know how to properly close a popover using JS to avoid this? I've created the following fiddle that demonstrates the problem.

http://jsfiddle.net/fxqzn4xd/1/

Thanks very much.

Update: This issue isn't a duplicate of the proposed question

Thanks as always to the SO community for keeping the place tidy and relevant. However, this isn't a duplicate of the proposed question. The problem in that question was that the popovers weren't initialised until the first click. Therefore, the first click did not open the popover, but did initialise it so the second and all subsequent clicks worked.

That is not the problem I found. Popovers are initialised on page load so my first click does open the popover. When closed using the manual .popover('hide') method, the second click then does not work. i.e. every other click works in my scenario. These are different issues caused by different problems. The issue in the linked post is to initialise popovers before the first click, which I already do.

I reported the issue I found on the twbs bootstrap project on GitHub and it turns out it is a known bug, first reported in version 3.3.5 back in July. It had a milestone fix of 3.3.6 but this slipped (3.3.6 came out recently) and now has a milestone of 3.3.7. Full details on Github here:

Calling .popover('hide') prevents popover from open on next click #18860

Good news though, there is a simple workaround that can be applied while waiting for it to be committed to 3.3.7. I'll post it as a solution.

Answer

Thanks go to GitHub user 'julesongithub' for providing this workaround. Putting this on the same page as a popover you wish to close using .popover('hide') solves the issue. Essentially it works by resetting the 'inState.click' variable for the popover which the hide method isn't doing.

$('body').on('hidden.bs.popover', function (e) {
    $(e.target).data("bs.popover").inState.click = false;
});