Topic: Prevent run default (select) event handler of mdb-auto-completer
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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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