Some weird animation behaviour of Radio group and Switch occur in Popover

[NevenLeung]

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

3.10.3

Environment

"5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36"

Reproduction link

Steps to reproduce

Click the radio button quickly.

After that, you can see the animation will show on every button you just clicked including the switch component.

If you wait few seconds to click the button, you may still see only one button show the animation you clicked before.

The Gif for this issue:

What is expected?

Show the animation correctly .

What is actually happening?

One click, every button show animation.

---

Using the radio group and switch together at the popover outside works fine.

I have found if the handler of radio group contains the this.setState(), the animation problem will occur.

Hope this clue will help you to fix it.

[orzyyyy]

For easier to read, I rewrite the demo of this.

When render PopoverContent in App directly, it would show animation correctly, as below,

render() {
  return (
    <PopoverContent
      toggleScrollSync={this.onScrollSyncChange}
      toggleDisplayMode={this.onDisplayModeChange}
    />
  );
 }

So maybe there is something wrong with trigger. To know more, I must learn how it works, and it may take for a long time.

If anyone would like to take this issue, maybe check what's wrong with trigger is a good choice.

[zombieJ]

Looks like re-render will makes Wave animation re-play. Still checking...

[zombieJ]

Catch it! forcePopupAlign in rc-tooltip makes the browser reflow which reset the animation. Later for patching...

[afc163]

This problem still exists in popconfirm demo.

[zombieJ]

This problem still exists in popconfirm demo.

Hmmm, popup will trigger re-align...

[zombieJ]

Find some way, let me test.