Autoclose behaviour for dropdown

Feature Request
1

As far as I can tell (and I may well be wrong), the Wappler implementation of the BS5 dropdown component doesn’t support the autoclose option.

Normally, if using as a navigation tool, it will be closed when a page is loaded (after clicking one of the menu items), however I want to use a button group with a dropdown for click events on my page. Even if I add the data-bs-auto-close property, it isn’t applied when Wappler initiates the component so the menu stays open after an item is clicked. Could it be added please?

2

Not sure what the problem is. Have a look:

2022-06-08_22-40-31
2022-06-08_22-40-311280×720 1.01 MB

3

It works in the preview, but publish (I have local Docker environment running) and view through a browser and it doesn’t collapse - you have to click the button again to toggle it.

Screen Recording 2022-06-08 at 14.13.08

I tried on both the content page and layout page. I have even tried just dropping in sample code from the BS website and they all do the same thing…

The same dropdown in preview:

Screen Recording 2022-06-08 at 14.20.12

4

The dropdown that is created by Wappler is exact the same as show as an example in the Bootstrap documentation. The code looks like:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

Do you mind copying the above code and pasting it in your document to see what happens?

5

Thanks Ben,
I’ve found out what it was. I had some custom JS on the page that stopped propogation - making that more defined when to apply solved it.

Help and time much appreciated as always!

Having the option to choose the desired behaviour (as the point of the FR) still stands, though. I have other cases where I would like the dropdown to stay open when an item is clicked.

1 Like