Multiple mdb-select Components - Dropdown Overlap Problem


Topic: Multiple mdb-select Components - Dropdown Overlap Problem

Salman Ali pro premium asked 7 days ago

Current Behavior: When multiple mdb-select components are present on a page, clicking the dropdown arrow on one selector keeps previously opened dropdowns visibleMultiple option lists remain open simultaneously, causing visual overlap

Expected Behavior: Before opening a new selector's options, any currently open dropdown should automatically close. Only one options list should be visible at any time

Reproduction Steps: Place two or more mdb-select components on a pageOpen the options dropdown for Selector A. Without closing, click the dropdown arrow for Selector B

https://usercontent.mdbootstrap.com/mdb-images/support/97f2df56-c100-45f7-bba8-3aedae084bd5-multipleDropdown.jpg

https://usercontent.mdbootstrap.com/mdb-images/support/79165a85-2293-4828-a80d-c40e6f63c7ae-dropdownIcon.jpg


Thank you for reporting this problem. We added it to our to-do list and will try to add a fix to the next update.


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
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 8.0.0
  • Device: Laptop
  • Browser: Google
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes