Topic: DropDown API Options not working

Anas Qiblawi free asked 2 years ago

for Example if I added this attribute


Expected behavior

the dropdown list shouldn't close unless i tap outside it

Actual behavior

It closes whether I tap on it or outside of it


    <div class="dropdown">
  <a class="dropdown-toggle d-flex align-items-center hidden-arrow float-end" href="#" id="AvatarDropdownMenuLink" data-mdb-autoClose="outside" role="button" data-mdb-toggle="dropdown" aria-expanded="false">
    <img src="" class="rounded-circle" height="30" alt="" loading="lazy" />
  <ul class="dropdown-menu dropdown-menu-end border" aria-labelledby="AvatarDropdownMenuLink">
      <a class="dropdown-item" href="#">My profile</a>
      <a class="dropdown-item" href="#">Settings</a>
      <a class="dropdown-item" href="#">Logout</a>
  <div class="dropdown">

Resources (screenshots, code snippets, etc.)

Dawid Wajszczuk staff answered 2 years ago


Try using data-mdb-auto-close="outside". Camelcase options are being used with JS options. For data attributes simply use kebab case. Here is the snippet:

Keep coding,

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 3.9.0
  • Device: ALL
  • Browser: FireFox
  • OS: ALL
  • Provided sample code: No
  • Provided link: Yes