Custom element in autocomplete component with (click) doesnt

<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>

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

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

Damian Gemza staff commented 6 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 6 years ago

@Damian Gemza No browser errors.

---

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

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

---