Topic: Big bug with multiple mdb-completer (Angular)

Paperfree pro asked 4 years 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?

duong do free answered 4 years ago


Hello Arek, I have made an image to explain this scenario here: https://photos.google.com/photo/AF1QipOIfbqLBytt5cMsZpBhhE_PxoZmDKiYW3Fkj_DY  

Arkadiusz Idzikowski staff commented 4 years ago

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

duong do free commented 4 years ago

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

Arkadiusz Idzikowski staff commented 4 years ago

Thank you for the detailed explanation. We will take a close look at this problem.

duong do free commented 4 years ago

Hi Arkadiusz, Do you have any news for this issue? Or it is not clear? We are waiting for your suggestion. Thanks in advance!

Arkadiusz Idzikowski staff commented 4 years ago

Dear duong do, We have confirmed the existence of this problem, unfortunately there is no quick workaround for now. This component will be completely rewritten, but I can't give you an ETA yet. Regards, Arek

duong do free commented 3 years ago

Hi Arkadiusz,

Could you please update us the status about the autocomplete?

Thanks inadvance!


Damian Gemza staff commented 3 years ago

Dear duong do,

Unfortunately, this fix isn't prepared yet. We have a lot of other tasks.

Best Regards,

Damian


Arkadiusz Idzikowski staff answered 4 years ago


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 free answered 4 years ago


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

Arkadiusz Idzikowski staff answered 4 years ago


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 free answered 4 years 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.

Witold Tkaczyk free answered 4 years 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 pro commented 4 years 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 free commented 4 years ago

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


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags