Hi, how can I prevent running (select) event of mdb-auto-completer? I don't like the behavior of mdb-auto-completer when I select an item from a list, the input's value automatically gets the selected option's [value]. This is not good for me since I'd like to override the basic behavior and use only a property of the option's [value].

Check my example below: There's the part with [value]="location" where location is an object like {id:223,'label':California}.

I need the whole object not only one property so I can't change it to [value]="location.label". If I select this [Object Object] appears in the input since it gets the object.

With angular-material-autocompelte there is a [displayWith] input that gets an experssion to determine which part of the selected value should appear in the belonging input field, using this example it would be like: [displayWith]="location.label".

I can override the input's value if I use (select) event, but I HAVE TO use setTimeout because sometimes the default (select) event handler slower than my custom handler, and finally I'm getting back [Object Object].

How can I totally disable the internal/default (select) event handler of mdb-auto-completer and use only mine?

e.preventDefault() didn't work since (select) didn't pass the original event some reason :(

I feel the autocompleter and documentation half-ready you should explain this so much better guys. As a premium user I'm disappointed right now.

<div class="md-form input-group" *ngIf="Location && (!Location.id || (Location.id && Location.id != Location.country_id))">
    type="text"
    [(ngModel)]="locationName"
    (keyup)="locationNameChanged($event)"
    class="completer-input form-control mdb-autocomplete mb-0"
    [mdbAutoCompleter]="location"
    placeholder="State/Province"

  />
  <mdb-auto-completer #location="mdbAutoCompleter" (select)="select($event)">
    <mdb-option *ngFor="let location of locations | async" [value]="location">
      <div class="d-flex flex-column">
        <strong>{{ location.location_name}}</strong>
      </div>
    </mdb-option>
  </mdb-auto-completer>
</div>

   
   /* Item Selected */
  select(e){
    console.log('select',e);
    this.Location = e.text;
    this.locationName = this.Location.location_name;

  }

  /* Location Input Changed */
  private locationNameChanged(e) {
    this.locationNameSubject.next(this.locationName);
  }