Custom element in autocomplete component with (click) doesnt

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

fifa-am 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 commented 5 years ago

@Damian Gemza No browser errors.

fifa-am 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.

Add comment

Arkadiusz Idzikowski staff answered 5 years ago