MDBDropdownMenu component detached from MDBDropdownToggle when parent container is scrollable

[cgero-eth]

When the MDBDropdown component is placed inside a scrollable container and the menu is open, the MDBDropdownMenu detach itself from the MDBDropdownToggle component and follows the boundaries of the scrollable container.

Component example:

<div className="app">
  <div className="wrapper">
    <MDBDropdown>
      <MDBDropdownToggle>MDBDropdown</MDBDropdownToggle>
      <MDBDropdownMenu>
        <MDBDropdownItem>Action</MDBDropdownItem>
      </MDBDropdownMenu>
    </MDBDropdown>
  </div>
</div>

With the following style:

.app {
  height: 500px;
  background-color: grey;
  overflow: scroll;
}

.wrapper {
  height: 1500px;
}

There is also a typo on the DropdownMenu component. The prop modifires is passed to the Popper component instead of modifiers: https://github.com/mdbootstrap/React-Bootstrap-with-Material-Design/blob/4d36a907c6110cc67178d718b513819a4ed3cd60/src/components/Dropdown/DropdownMenu/DropdownMenu.js#L54

I would suggest to add a modifiers prop (of type PopperJs.Modifiers) to the MDBDropdownMenu component to be able to set the following setting on the component when needed: modifiers={{ preventOverflow: { escapeWithReference: true }}}

[pglejzer]

Hello,

thanks for your advice. We will test your idea and if it will be everything alright with that we will add this to our package. Thanks again and have a good weekend.

Best, Piotr

[pglejzer]

Hi,

I already added this prop ( modifiers) to this MDBDropdownMenu component. It will be available in our package in the next release (23 of December ).

Best regards, Piotr