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