Big bug with multiple mdb-completer (Angular)

MDB SupportCategory: MDB AngularBig bug with multiple mdb-completer (Angular)
Paperfree Pro User asked 7 months 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.


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


import { Component } from '@angular/core';
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 months ago


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


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


I hope that helps


Witold Tkaczyk replied 7 months ago

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

Paperfree Pro User replied 7 months 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
public ngOnInit() {
this.completer.selected.subscribe((item: CompleterItem) => {
this.completer.highlighted.subscribe((item: CompleterItem) => {
this.completer.opened.subscribe((isOpen: boolean) => {
this._open = isOpen;
if (this.initialValue) { //<- start workaround
this.searchStr = this.initialValue; //
this.onFocus(); //fix label
}// <- end workaround