Selecting nested tags within options prevents method from being called

Question

I'm trying to call a method when I click anywhere withing an option.

When you click any nested tags within options the select tray would disappear without calling the method.

If you select any white space or any text that is not nested the method would be called.

<mdb-auto-completer 
    #completerBillTo
    #auto="mdbAutoCompleter"
    textNoResults="I have found no results :("
    [appendToBody]="true">
        <mdb-option 
            *ngFor="let billTo of resultsBillTo | async"
            [value]="billTo.name"
            (click)="updateAccountInfo( billTo, _accountService.accountFormGroup)">
                <small><strong> Id: {{ billTo.id }} </strong></small>
                {{ billTo.name }}
                <small>Value: {{ billTo.value }}</small>
        </mdb-option>
</mdb-auto-completer>

I've tried creating an overlay div and positioned it in front of all the elements but clicking the div will not call anything on click.

Answer 1

From the docs, the mdbAutoCompleter has a select event. When an option is selected, the event will fire.

<mdb-auto-completer 
    #completerBillTo
    #auto="mdbAutoCompleter"
    textNoResults="I have found no results :("
    [appendToBody]="true"
    (select)="updateAccountInfo($event)"
>
    <mdb-option 
        *ngFor="let billTo of resultsBillTo | async"
        [value]="billTo"
    >
        <small><strong> Id: {{ billTo.id }} </strong></small>
        {{ billTo.name }}
        <small>Value: {{ billTo.value }}</small>
    </mdb-option>
</mdb-auto-completer>

If its just when you select the tags, you can fix this with css:

<mdb-option class="parent-class">

.parent-class {
  small, strong {
    pointer-events: none;
  }
}

This will remove the click events for the small and strong elements.