Dropdown not usable by events

Topic: Dropdown not usable by events

Dev-Team HCH priority 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.

Add comment

Dev-Team HCH priority answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

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

Add comment

Arkadiusz Idzikowski staff answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

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.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: Priority
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

Dev-Team HCH

55Support score
5Questions 3Answers 0Snippets