Sign in


Sign up


Big bug with multiple mdb-completer (Angular)

MDB SupportCategory: MDB AngularBig bug with multiple mdb-completer (Angular)
Paperfree Pro User asked 2 weeks ago in MDB pro, version:4.37

Hello. I found a bug: if  I put multiple mdb-completer on one page and use different [(ngModel)] then both two input fields have same initial value.

App.component.html

<form>
<mdb-completer [label]="'Employee'"name="autocomplete" [(ngModel)]="model.FirstTest" [datasource]="clients" [minSearchLength]="2"></mdb-completer>
<mdb-completer [label]="'Client'"name="autocomplete" [(ngModel)]="model.SecondTest" [datasource]="clients" [minSearchLength]="2"></mdb-completer>
</form>

app.component.ts

import { Component } from '@angular/core';
@Component({
selector:'mdb-root',
templateUrl:'app.component.html',
styleUrls: ['app.component.css']
})

export class AppComponent {
model= { FirstTest:'First', SecondTest:'Second' };
clients= [{ Id:'Test 1' }, { Id:'Test 2' }, { Id:'Test3' }];
}

Do you have any suggestions to fix that?

1 Answers
Witold Tkaczyk answered 7 days ago

Hello,

mdb-completer have initialValue input so solution looks like this:

<form>

    <mdb-completer [label]="'Employee'"name="autocomplete" [initialValue]="model.SecondTest" [(ngModel)]="model.SecondTest" [datasource]="clients" [minSearchLength]="2"></mdb-completer>

    <mdb-completer [label]="'Client'"name="autocomplete" [initialValue]="model.FirstTest" [(ngModel)]="model.FirstTest" [datasource]="clients" [minSearchLength]="2"></mdb-completer>

</form>

I hope that helps

Regards

Witold Tkaczyk replied 6 days ago

Thank you for reporting I added this to our TODO list.

Paperfree Pro User replied 7 days ago

Thank you, but initialValue doesn't work. I see a source code of version 4.3.7 and that field is never used. Maybe in future versions it will be work.
I already added a workaround for that to make initialValue work:
in completer.component.ts
<code>
public ngOnInit() {
this.completer.selected.subscribe((item: CompleterItem) => {
this.selected.emit(item);
});
this.completer.highlighted.subscribe((item: CompleterItem) => {
this.highlighted.emit(item);
});
this.completer.opened.subscribe((isOpen: boolean) => {
this._open = isOpen;
this.opened.emit(isOpen);
});
if (this.initialValue) { //<- start workaround
this.searchStr = this.initialValue; //
this.onFocus(); //fix label
}// <- end workaround
}
</code>