Bootstrap: Popover with data-trigger:focus not close when click in button again. Usability?

[adrianoresende]

Usability improvise if close popover when button is clicked again, equal behavior without data-trigger.
Or new mini button with icon close in top-right in popover

[patrickhlauke]

The problem here would be that if focus is what is triggering the popover, then clicking the same trigger again would still keep the focus on the trigger. To modify the current implementation would require to keep track somehow of "although this trigger has focus, we've already shown the popover and the user clicked on the trigger again, so don't show the popover again", which would also need to be reset as soon as focus eventually leaves the trigger (e.g. if the user clicked on something else). Not quite sure it's worth the implementation pain...

[adrianoresende]

Htmm.. well, with div.modal-backdrop (transparent) not is good, why need to click two time in another button in page.
Now I understand that it's complicated.
Who know, maybe with the new technology javascript solves hehehe

[mdo]

Bootstrap 3 is no longer being officially developed or supported.

All work has moved onto our next major release, v4. As such, this issue or pull request is being closed as a "won't fix." For additional help and support, we recommend utilizing our community resources. Thanks for your understanding, and see you on the other side of v4!

<3,
@mdo and team

[d13]

This issue still happens in v4, so I definitely think it should be kept open.

[czerthas]

data-trigger="manual"

$('[data-trigger="manual"]').click(function() {
    $(this).popover('toggle');
}).blur(function() {
    $(this).popover('hide');
});

[princenaman]

data-trigger="manual"

$('[data-trigger="manual"]').click(function() {
    $(this).popover('toggle');
}).blur(function() {
    $(this).popover('hide');
});

Cannot get it to work 😞

[qesya]

Any news about it?

[abhi90g]

Facing same issue in v4. Cannot close popover on clicking button again if triggers='focus' is used.
Tried the same with bootstrap-vue v2.0.0-rc.19

An update on this would be appreciated

[ksr007]

Suppose my popover is mapped with ID "settingMenuPopover" and trigger is set as 'focus'.

Then this handling of popover open and close work for me :

  var isSettingMenuPopoverVisible = false;  //assuming popovers are hidden by default
  var settingMenuPopoverOpenCounter = 0;   // to handle first time open case (Issue : first time open as flickering ) 
  var settingMenuPopoverManualClose = false;

      $('#settingMenuPopover').on('shown.bs.popover', function () {
        isSettingMenuPopoverVisible = true;
      })

      $('#settingMenuPopover').on('hidden.bs.popover', function () {
        if (!settingMenuPopoverManualClose) {
          settingMenuPopoverOpenCounter = 0; // set openCounter 0 to automatically closed popover to prevent flickering of popover at next time
        }
        settingMenuPopoverManualClose = false;
        isSettingMenuPopoverVisible = false;
      })

      $("#settingMenuPopover").on("click", function(){
          if (isSettingMenuPopoverVisible) {
              settingMenuPopoverOpenCounter += 1;
              settingMenuPopoverManualClose = true;
              $('#settingMenuPopover').popover('hide');
          } else if (settingMenuPopoverOpenCounter > 0) {
              $('#settingMenuPopover').popover('show');
          }
      });

[ravimisra]

A more optimized way to achieve the same thing:
popover params:

{          
    trigger: 'click',
    tabindex: 0
}

       $('#settingMenuPopover').on('shown.bs.popover', function (e) {
            var target = e.target;
            $(document).one('click', function(e) {
                var clicked = e.target;
                if (clicked != target && clicked.parentElement != target) {
                    $(target).trigger('click');
                } 
            });
        });

[RaminPakzad]

You can use focus and click together.
trigger: 'focus click'