In using the "triggerAutoclose" option that closes opened popovers on document click, it works the first time, but for every time after that, if closes popovers the second they are opened, giving it a flicker type effect.

Currently the script checks if a $currentPopover exists, and if so, to hide it. This doesn't make sense if the current popover is the open popover.

So to resolve, we just need to change line 104 of bootstrap.js from:
if ($currentPopover.length) {
to:
if (!$currentPopover.is(this)) {
and it will work.

I've tested this fix with multiple popovers and it works fine.

Comments

markhalliwell’s picture

Version: 7.x-3.1-beta2 » 7.x-3.x-dev
Status: Needs review » Active
jurriaanroelofs’s picture

Status: Active » Needs review
StatusFileSize
new1.38 KB

Patch attached.

To reproduce reported problem:
1. Turn on popover > autoclose option
2. Add popover button with click trigger:
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="click" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
3. Click to open popover. Click outside to hide. Second click will do nothing. Third click will quickly show and hide the popover, because the old code had a logic of on-show-popover: hide popover. Subsequent clicks will also not show the popover.

markhalliwell’s picture

Status: Needs review » Needs work
+++ b/js/bootstrap.js
@@ -77,12 +77,10 @@ var Drupal = Drupal || {};
-        var $currentPopover = $();

Removing this defeats the whole point of the setting.

I actually ran into this issue in the 8.x-3.x branch and refactored this entire behavior. This code should be backported to 7.x-3.x:
http://cgit.drupalcode.org/bootstrap/tree/js/popover.js

jurriaanroelofs’s picture

I actually wanted to make another patch that scopes the behavior even broader. I also have popovers that are completely dynamically created (Because they contain html). In that case I will add a class .has-bootstrap-popover and broaden the scope like this:

          $(document).on('click', function (e) {
            if (!$(e.target).is('[data-toggle=popover], has-bootstrap-popover') && $(e.target).parents('.popover.in').length === 0) {
              $('[data-toggle="popover"], has-bootstrap-popover').popover('hide');
            }
          });

Is that not a direction you want to take? If not than I will just put these behaviors in a subtheme and let them co-exist with the basetheme autoclose.

markhalliwell’s picture

I'm not entirely sure what you mean by "broader". Regardless, no, the direction I'd like to take is what I stated in #3.

Since this "feature" is a setting, it can easily be disabled so a sub-theme can implement whatever custom behavior it wants to.

markhalliwell’s picture

Status: Needs work » Fixed
StatusFileSize
new5.03 KB

Here is, more or less, a direct backport of the 8.x JS.

  • markcarver committed 0b792fd on 7.x-3.x
    Issue #2376405 by markcarver: Popover option "triggerAutoclose" causes...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

joseph.olstad’s picture

Thanks, including this in my make file.

joseph.olstad’s picture

Hmm, my make couldn't patch this for some reason.
trying to apply to 7.x-3.14
Unable to patch bootstrap with popover_option-2376405-6.patch.

joseph.olstad’s picture

StatusFileSize
new5.01 KB

use this patch instead

joseph.olstad’s picture

nevermind, 3.14 already has this, PEBKAC issue