Dropdown not usable by events


Topic: Dropdown not usable by events

informatik@heiniger.ch pro premium priority vip early access asked 5 years ago

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)

Arkadiusz Idzikowski staff commented 5 years ago

Thank you for reporting this problem, we will take a closer look at it.


Arkadiusz Idzikowski staff answered 5 years ago

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.


informatik@heiniger.ch pro premium priority vip early access answered 5 years ago

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


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: 7.5.4
  • Device: Windows PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No
Tags