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 div's are not removed after fast mouse-in and mouse-out #1208

Closed
RobertDiebels opened this Issue Oct 18, 2017 · 8 comments

Comments

Projects
None yet
5 participants
@RobertDiebels

RobertDiebels commented Oct 18, 2017

What happens?
When normally moving the mouse in an out of a button element a connected pop-over is shown correctly. In the sense that the div which contains the pop-over is removed from the HTML body or any other container.

When moving the mouse in and out of a button at a fast pace, such that the hover event is triggered at a higher rate, the div element which contains the pop-over is not removed from the HTML body or any other container.

What is my expectation
That the pop-over div is removed regardless of the rate of hover events.

Steps to reproduce

  1. Go to https://bootstrap-vue.js.org/docs/components/popover/#overview
  2. Open developer-tools and view the body element.
  3. Find any button with a pop-over
  4. Move the mouse in and out of the button at a fast pace.
  5. Check the body element in the developer tools.
  6. You will find that a div with an id-attribute like this __BV_popover_1__ as been added to the body multiple times.
@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Oct 21, 2017

Confirmed for both directive and component popovers, as well as tooltips

@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Oct 21, 2017

It appears to have something to do with the transition timing. If a transition is still in progress during hide, and the tooltip/popover is triggered to open before the transition finishes.

As a test, by increasing the transition time, it makes it more probable that this issue shows up.

@mert574

This comment has been minimized.

mert574 commented Oct 27, 2017

Waiting for the new release.

Example reproduction

As you can see, definitely not usable in this state. It especially affects SPA with inner scrolling.

@devsnd

This comment has been minimized.

devsnd commented Oct 31, 2017

BTW: you can use the no-fade option as a workaround for now, which just disables the animations that glitch like that.

E.g.

<b-popover no-fade>something</b-popover>

or for the directly style:

<div v-b-popover.nofade.hover="'hello'"></div>

@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Oct 31, 2017

Release v1.0.0 (non-beta) will be coming soon (hopefully today or tomorrow), and will have the fix for this.

@landor

This comment has been minimized.

landor commented Nov 16, 2017

I still get this happening with 1.0.2.
https://jsfiddle.net/rmtw5kpr/
Run the mouse into the button to let the tooltip fade in completely, then quickly move the mouse out, in, out, then you are left with an empty popover fragment.

@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Nov 16, 2017

I've tried the fiddle and cat reproduce the issue. I see the div linger sometimes (in firefox devtools), but it always goes away.

I even updated the fiddle to explicitly use @1.0.2 (instead of @latest, which may have cached an older version) https://jsfiddle.net/rmtw5kpr/2/ and still do not see the issue occurring.

@landor

This comment has been minimized.

landor commented Nov 17, 2017

This was recorded in FF57.0 at https://jsfiddle.net/rmtw5kpr/2/
peek 2017-11-17 10-09

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment