React Bootstrap Dropdown Menu auto position does not work

Question

I can't set up the DropdownMenu in such a way that the dropdown list does not go off the screen. I tried to use flip, placement, setting different overflow types, different popperConfig options - but the dropdown still goes off the screen both horizontally and vertically. I would like that when being on the edge of the screen, the dropdown would be placed in the visible part of the screen. I can do this by setting the position manually, but I would like to use it automatically and by tools of a React. I reproduced a small example of the problem when the dropdown goes over the edge of the screen horizontally, and I ask for your advice:

https://codesandbox.io/s/test-sandbox-for-dropdown-w4lxkm

Answer 1

What you want to achieve can be achieved using the React Bootstrap's DropdownButton component as well without adding any additional CSS to position it manually. It also provides you with the option of drop direction. You can check this on their official documentation.

Edit:

Replace your Button component with the DropdownToggle component. This component will render a button for you with all the styles in place as per your requirement.

Updated Example: https://codesandbox.io/s/test-sandbox-for-dropdown-forked-tx7h7d