Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
3 tasks done
mateuszdebinski opened this issue Apr 3, 2024 · 0 comments
Open
3 tasks done

Comments

@mateuszdebinski
Copy link

Prerequisites

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant