Dropdown overflow issue

[huntjosh]

Describe the bug

Dropdown on the right side of the window triggers flickering horizontal scrolling on the body

To Reproduce

Steps to reproduce the behavior:

1. Click on the 'd' button (seems to be easier to replicate by first holding down and then releasing)
2. observe the bottom horizontal scrollbar

Reproducible Example

https://codesandbox.io/s/frosty-swanson-lzk4f

Expected behavior

No horizontal scroll bar flickering

Screenshots

Hard to get a screenshot sorry

Environment (please complete the following information)

• Operating System: win 10
• Browser, Version: chrome 90.0.4430.212
• React-Bootstrap Version: 1.6.0

Additional context

It seems like the dropdown menu is initially rendering with an overflow causing the horizontal scroll bar, and then it's being transformed to the correct location which is removing the overflow and scroll bar

I can work around this by setting the width on the button container to be wider than the dropdown menu, but that isn't a very robust solution on my end, so wondering if there is also other ways that I can solve this on my end.

[thelokeshgoel00]

Tried to reproduce it.

See that the whole HTML width is still the size of viewport. Its quite weird actually.
See the scrolled right version

I also debugged that the main culprit is the below code where everything starts.

commitRoot(root)
I tried to get the value of root variable, but not able to copy it successfully.

[SimpleCreations]

I am having the same issue with react-bootstrap 2.1.2.