Prevent run default (select) event handler of mdb-auto-compl


Topic: Prevent run default (select) event handler of mdb-auto-completer

bitmads pro premium asked 5 years ago

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);
  }

Arkadiusz Idzikowski staff answered 5 years ago

We are already aware of the problems with (select) output. We added new (selected) input to version 8.2.0 (should be available on next Monday - 26.08) that will be fired only when option is selected (not only highlighted).

As for the displayWith option, I already answered in your other topic:

https://mdbootstrap.com/support/angular/object-as-mdb-option-value/


bitmads pro premium commented 5 years ago

Sorry, this is not answer to my question, because this change won't solve my problem. You change the trigger but I still can't prevent running the basic/internal select event handler.


Arkadiusz Idzikowski staff commented 5 years ago

Your problem should be solved by displayWith input which we will add in next version.


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: 8.1.1
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No