Popover event.preventDefault() for show.bs.popover: disables popover

[mateuszdebinski]

Prerequisites

• [X] I have searched for duplicate or closed issues
• [X] I have validated any HTML to avoid common problems
• [X] I have read the contributing guidelines

Describe the issue

When an event listener attached to a Bootstrap popover for show.bs.popover returns event.preventDefault(), the popover is not displayed (the correct behavior) the first time, but it will no longer be possible to trigger the popover. The button associated with the popover cannot cause the popover to open again.

Based on my examination, calling the popover sets the this._isHovered variable to true (_enter function). This, however, unintentionally prevents the popover from being reopened.

The issue arises because even if the event hasn't been prevented (showEvent.defaultPrevented is false), and the popover is in the DOM (isInTheDom is true) , the this._isHovered variable is still set to true and this unintendedly prevents the popover from being reopened in subsequent interactions.

in the show function we have two conditions that make reopening not work: 1.

if (!(this._isWithContent() && this._isEnabled)) {
    return;
}

if (showEvent.defaultPrevented || !isInTheDom) {
    return;
}

Reduced test cases

Link for V5 JS Bin test case:

https://output.jsbin.com/madagiqotu

Solution:

A possible solution would be to set this._isHovered to false before the return statement within the show function. This ensures that the this._isHovered state is reset, allowing the popover to be reopened if the conditions for displaying it are met again.

What operating system(s) are you seeing the problem on?

Windows, macOS, Android, iOS, Linux

What browser(s) are you seeing the problem on?

Chrome, Firefox

What version of Bootstrap are you using?

v5.3.3