Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Popover] Positioning delayed

See original GitHub issue

Problem description

Popover component renders children before applying position styling. This results in a ‘flash’ of the popover in the top left corner (x: 0, y:0) before positioning correctly. This is caused by the setPlacement function being wrapped in setTimeout. Removing the setTimeout wrapper resolves the issue. The timeout was added for this issue: #7663.

Initial render ‘flash’:

Split second later, correctly positioned:

Versions

Material-UI: 0.19.0
React: 15.5
Browser: Chrome 60.0.3112.90

Issue Analytics

State:
Created 6 years ago
Reactions:23
Comments:41 (10 by maintainers)

Top GitHub Comments

23reactions

mattcarlottacommented, Dec 5, 2017

Update: I was able to minimize the initial re-position animation by wrapping whatever is inside the Popover component with a Menu component, then it seems to open/close properly (it’ll still show a flash from time to time, but significantly less than the above): deepin-screen-recorder_select area_20171204211114

13reactions

austinhcommented, Sep 19, 2017

Any update with this one?

Top Results From Across the Web

[Popover] Positioning delayed #8040 - mui/material-ui - GitHub

Popover blinks for some few visible frames (1000ms/24) on top-left corner of screen and then shows up in correct place without transition.

Popover delay at bootstrap doesnt work - Stack Overflow

To hide the popover automatically, after a certain time, you must use the timeout approach above. Show / hide only define the "effect",...

Popovers - Bootstrap

Popovers rely on the 3rd party library Popper.js for positioning. ... Delay showing and hiding the popover (ms) - does not apply to...

Popover | DotVVM Documentation

The Delay property is used to delay showing and hiding of the popover (value represents number of milliseconds). The Container property specifies the...

Bootstrap Popovers - examples & tutorial

Popovers rely on the 3rd party library Popper.js for positioning. ... Delay showing and hiding the popover (ms) - does not apply to...