Big bug with multiple mdb-completer (Angular)

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

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

Add comment

duong do free answered 5 years ago

0 0 Best answer

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

Arkadiusz Idzikowski staff commented 5 years ago

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

duong do free commented 5 years ago

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

Arkadiusz Idzikowski staff commented 5 years ago

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

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

Hi Arkadiusz,

Could you please update us the status about the autocomplete?

Thanks inadvance!

Damian Gemza staff commented 5 years ago

Dear duong do,

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

Best Regards,

Damian

Add comment

Arkadiusz Idzikowski staff answered 5 years ago

0 0 Best answer

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

Add comment

duong do free answered 5 years ago

0 0 Best answer

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

Add comment

Arkadiusz Idzikowski staff answered 5 years ago

0 0 Best answer

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

Add comment

duong do free answered 5 years ago

0 0 Best answer

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.

Add comment

Witold Tkaczyk free answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

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

Please insert min. 15 characters.

Witold Tkaczyk free commented 6 years ago

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

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

Paperfree

Pro User 4Support score
4Questions 0Answers 0Snippets