Topic: MDB Dropdown shows on parent window, not child window

Mikey free asked 1 year ago


Expected behavior: I am using React's createPortal() alongside window.open to create a pop up child window. If a <MDBDropdown> exists within the child then clicking said dropdown should create a dropdown underneath it.

Actual behavior: The button is there all well and good, but the actual dropdown once clicked appears in the same x/y coord but on the parent window.

Resources (screenshots, code snippets etc.):

Window popup method: First answer indicates how the external window was made https://stackoverflow.com/questions/47574490/open-a-component-in-new-window-on-a-click-in-react.

Using first dropdown example stated here https://mdbootstrap.com/docs/b5/react/components/dropdowns/

The first version of this wasn't in React (using the base JS library offered here) and it worked fine in a child window. Bringing that code across meant the dropdown didn't open at all (guess not cross-compatible) and using React elements was the issue stated above.


Krzysztof Wilk staff answered 1 year ago


Hi!

Currently, we are working on a dropdown refactor and the possibility to attach the children underneath the parent instead of attaching it at the end of the document body will be included there :)


Mikey free commented 1 year ago

Ah thank you for the response!

Just wondering, but would you perhaps have any suggestions in the meantime that works with MDB React?


Krzysztof Wilk staff commented 1 year ago

Hi!

I'm afraid there's no workaround for that right now, but I think you can edit the source code from the GH repository until we fix that :)



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: MDB5 4.1.0
  • Device: Dell
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: Yes
  • Provided link: Yes