Big bug with multiple mdb-completer (Angular)

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Big bug with multiple mdb-completer (Angular)

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

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

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

duong do answered 6 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.

Arkadiusz Idzikowski staff answered 6 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 answered 6 years ago

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

Arkadiusz Idzikowski staff answered 6 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 answered 6 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 6 years ago

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

duong do commented 6 years ago

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

Arkadiusz Idzikowski staff commented 6 years ago

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

duong do commented 6 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 6 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 commented 6 years ago

Hi Arkadiusz,

Could you please update us the status about the autocomplete?

Thanks inadvance!

Damian Gemza staff commented 6 years ago

Dear duong do,

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

Best Regards,

Damian
Write
Create snippet
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
About author
Paperfree
Pro User
4Support score
4Questions 0Answers
0Snippets likes 0Snippets