Big bug with multiple mdb-completer (Angular)

Paperfree asked 11 months ago

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?


Witold Tkaczyk answered 10 months 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


Paperfree commented 10 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
<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>


Witold Tkaczyk commented 10 months ago

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


duong do answered 5 days ago

Hello,

I have another issue when I have two mdb-completer in one page. Here is my example code in github (https://github.com/duong-do/NgMDB_Autocomplete).

In short, I have two mdb-completer. The first one represents a list of class and the second one represents a list of student in the selected class.

When I change the class, the student component (mdb-completer) shows the students of the old selected class. It is updated only when I type something in the student component.


Dear duong do,

Thank you for reporting this problem, we will take a look at it. Could you check if it still exists in the latest version?

Regards,

Arek


duong do answered 5 days ago

The problem still exists when I use "**/ng-pro.git#master".


Dear duong do,

By latest version I meant version 6.2.3. I have tested your example app but I'm not sure if I understand how exactly your example should work. Could you give me more details about expected behavior of those components?

You can also check our select component with filterEnabled option because it might be useful in that case.

Regards,

Arek


duong do answered 3 days ago

Hello Arek,

I have made an image to explain this scenario here:

https://photos.google.com/photo/AF1QipOIfbqLBytt5cMsZpBhhE_PxoZmDKiYW3Fkj_DY

 


Arkadiusz Idzikowski commented 3 days ago

That url doesn't work for me. Could you upload this screenshot somewhere else?


duong do commented 3 days ago

you can find it here:
https://github.com/duong-do/NgMDB_Autocomplete/tree/master/Images


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No