Popover causes the browser to crash if window size is changed

[liemdo]

• components: popover
• reactstrap version 8.0.0

Steps to reproduce the issue

1. Open the popover in Chrome or Safari (I didn't test with other browsers)
2. Change the window size
3. The browser crashes. I have to force quit the browser.

[TheSharpieOne]

I cannot reproduce. Does this happen for you on https://reactstrap.github.io/components/popovers/ ?

[liemdo]

You have to resize the window quickly so that part of the popover is out of the window view. The browser crashes right after that.

If you open the Chrome Devtools while the popover is open, you'll get the same issue.

This issue may be related to this one #1482

[morel333]

I cannot reproduce. Does this happen for you on https://reactstrap.github.io/components/popovers/ ?

Open your samples in minimal browser size and click on any popover - it will reproduce.
Looks like ther's an infinite state placement change in PopperContent in handlePlacementChange (placement changes top/bottom -> etc).

[vitorblz]

The same happens with tooltips

[morel333]

As a hotfix changed
<ReactPopper referenceElement={this.targetNode} modifiers={extendedModifiers} placement={placement} >
to
<ReactPopper referenceElement={this.targetNode} modifiers={extendedModifiers} placement={attrs.placement} >
in PopperContent

[usman-subhani]

My browser crashes as well while using tooltips.Its a bit tricky to reproduce but as far as i know it often happens when mouse moves to quickly over the tooltip hover element or mouse hovers over a tooltip element during/after scrolling. I am using uncontrolled tooltips with delays mentioned below.
I am using v8.0.0 of reactstrap.

const tooltipDelay = { show: 500, hide: 300 };

const UncontrolledTooltipWithDelay = props => (
  <UncontrolledTooltip delay={tooltipDelay} trigger="hover" {...props} />
);

Edit: Nevermind, this is related to #1482

[Phibedy]

For me it happens if the tooltip does not fit in the window. As long as the tooltip fits on the page it works fine but if I keep decreasing the window size it fails.

Edit: Nevermind, this is related to #1482

[YassienW]

@usman-subhani Would this fix your issue? #1482 (comment)

[usman-subhani]

@usman-subhani Would this fix your issue? #1482 (comment)

@YassienW Yes downgrading to v7.1.0 of reactstrap resolved this for me. Thanks 👍

Also setting the tooltip prop flip to false also resolves the issue in v8.0.0

[jesusgp22]

This issue also happens if the popover is bigger than the current viewport on opening the popover