Topic: Dropdown not usable by events
Expected behavior - open Dropdown by click on another element
I'm trying to open a dropdown by clicking on an input-field. Based on the documentation it should be possible to use #dropdown="bs-dropdown" and then in the event (click)="dropdown.show()"
Actual behavior - dropdown not registered
Once clicking on the input it shows the following error, so dropdown
ERROR TypeError: Cannot read property 'show' of undefined
Code sample
The code below is how I use it, first there is a readonly-input. Then there is a dropdown-component. Once clicking on the input I expect the dropdown to be shown
<div class="md-form input-group mt-0 mb-3">
<input readonly type="text" class="form-control"
(click)="dropdown.toggle()">
<div mdbDropdown class="btn-group" #dropdown="bs-dropdown">
<button mdbDropdownToggle mdbBtn class="btn btn-blue m-0 dropdown-toggle btn-blue">Dropdown</button>
<div class="dropdown-menu dropdown-primary dropdown-angle-right force-scroll">
<a class="dropdown-item" *ngFor="let w of dropdownData"
(click)="clickAction">{{w.title}}</a>
</div>
</div>
</div>
Additional information
- Dropdown pops up perfectly when clicking on the button
- The dropdown is on a modal (behaviour of the modal is normal)
We tried to debug this problem on the code you provided and it turns out that the menu is automatically closed when you try to open it from an element other than the one with dropdownToggle directive. That's because of the dropdown auto close mechanism, which try to hide the menu on document click.
There are 2 workarounds:
1: Add event.stopPropagation to the custom dropdown toggle, in your case:
<input readonly type="text" class="form-control" (click)="dropdown.toggle(); $event.stopPropagation()" />
2: Set dropdown [autoClose] input to true (that will disable possibility to close dropdown on document click/escape button).
However, we could not reproduce the problem with undefined show or toggle methods. The code you provided works as expected on our end. If this problem still occurs please provide your MDB and browser version.
Hi Arkadiusz
Thank you, this worked partially. The event.stopPropagation helped to show the popup. I still had to do a workaround to manually fire a click-event on the dropdown-toggle-button.
I expect that there is some side-effect that prevents the proper propagation - so the 'dropdown' object is not initialized properly. Anyway, the workaround together with the stop-propagation worked for now. Still, is there a possibility to share the rendered HTML-File / Angular-Files privately so you can have a look at it?
Best regards,
Daniel
Arkadiusz Idzikowski staff commented 5 years ago
Hello,
You can send the demo to a.idzikowski@mdbootstrap.com
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: 7.5.4
- Device: Windows PC
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No
Arkadiusz Idzikowski staff commented 5 years ago
Thank you for reporting this problem, we will take a closer look at it.