Topic: Custom element in autocomplete component with (click) doesnt work

fifa-am free asked 5 years ago


Expected behavior When clicking the "Load more" button the loadMore() function is fired like with regular angular-material autocomplete component.

Actual behavior The loadMore() method is not fired

Resources (screenshots, code snippets etc.)

<div class="md-form">
      <input autocomplete="off" mdbInputDirective type="text" class="completer-input form-control mdb-autocomplete mb-0"
        [mdbValidation]="false" [(ngModel)]="searchText" #player [mdbAutoCompleter]="auto" id="player-autocomplete">
      <label for="player-autocomplete">Pick a player</label>
      <mdb-auto-completer #auto="mdbAutoCompleter" (select)="onPlayerSelect($event)">
        <mdb-option *ngFor="let option of results" [value]="option">
          <div class="d-flex flex-column">
            {{option.name}}
          </div>
        </mdb-option>
        <a href="#" (click)="loadMore()">Load more</a>
      </mdb-auto-completer>
    </div>

I've tried also making a directive to caputre the click like in example below

@Directive({
  selector: '[appLoadMore]'
})
export class LoadMoreDirective {

  @HostListener('click', ['$event'])
  clickEvent(event) {
    event.preventDefault();
    event.stopPropagation();
    console.log('Click from Host Element!');
  }
}

I've tried also attaching event listener to element in this directive.


Damian Gemza staff commented 5 years ago

Dear @fifa-am

Does the Browser console throws you some errors? If yes, please paste me here the error code.


fifa-am free commented 5 years ago

@Damian Gemza No browser errors.


fifa-am free commented 5 years ago

Probably mousedown event is fired earlier and it closes the whole dropdown so the actual click is made on anything that is behind the autocomplete dropdown.


Arkadiusz Idzikowski staff commented 5 years ago

Thank you for all the details, we will take a closer look at this problem.


Arkadiusz Idzikowski staff answered 5 years ago


This problem will be fixed in next version of MDB Angular. Listening to click event on mdb-option will be possible as well.



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.5.4
  • Device: pc
  • Browser: chrome
  • OS: windows 10
  • Provided sample code: No
  • Provided link: No