Strange Behaviour of AutoComplete

<div class="row">

<divclass="col-md-6 mx-auto my-5">

<mdb-completer [label]="ProjectOwner"id="ProjectOwner"name="ProjectOwner" [(ngModel)]="prjOwner" [datasource]="employeeCompleterService" [minSearchLength]="3"></mdb-completer>

</div>

</div>

protected searchStr:string;

protected employeeCompleterService: CompleterData;

names: Array<string>;

protected searchData= [ ];

constructor(private completerService: CompleterService) {

this.names = newArray<string>();

this.employeeCompleterService = completerService.local(this.names);

}

ngOnInit() {

}

ngAfterViewInit() {

setTimeout(() => {

this.names.push('yellow', 'black', 'red');

}, 3000);

}

1P3Cmdb pro commented 7 years ago

The array is being populated using google sheets via Gapi - I have console logged the array contents, there are about 22629 items in the array, all of them are strings, and as I've said before, the autocomplete definitely worked previously. Do you have any other ideas as to how we can solve this ? - perhaps a video call? I cannot share the entirety of the code here as it contains various api keys and sensitive data, so am looking to find alternative solutions

---

1P3Cmdb pro commented 7 years ago

Also it is working fine ( exact same process ) with smaller arrays populated from the same google sheet, It seems to me that its only the 3 big ones that is causing these issues

---

Damian Gemza staff commented 7 years ago

Could you share me a way in which we can easily reproduce set of data which you're using? Fr example, for 20,000 random string items? I don't need to get your private set, but If you would advise me how to generate that much strings, I would appreciate.

---

1P3Cmdb pro commented 7 years ago

when using this simple code to generate 30000 items, it works without any problems : for(var i = 0; i < 30000; i++){ names.push(i.toString()); } I will try to more closely replicate the original set of data and get back to you

---

Damian Gemza staff commented 7 years ago

I've got an 30000 string items like 'sfg6bvx62' in my array, and there's no problem. I'm unable without any problems to pick items, search for them, click on input etc etc. Which version of MDB Angular you're using? And how long is single string item in your array? How much chars? Does he contains a white signs like space or special signs # $ % or others?

---

1P3Cmdb pro commented 7 years ago

Damian, I found the error. Turns out it never was anything to do with MDBBootstrap's component. I just made an error in sanitizing the data coming from the google sheet, I missed checking for undefined ( empty ) columns. once I added a check and removed them all from the dataset its working again. Thank you for your patience and sorry for the time wasted !

---