CuppaLabs / angular2-multiselect-dropdown

Angular 2 Dropdown Multiselect
https://cuppalabs.github.io/angular2-multiselect-dropdown
MIT License
296 stars 256 forks source link

angular 5 ng-component's are getting appended, but not replaced because of Angular2-multislect-dropdown #316

Open MRakeshHarsha opened 6 years ago

MRakeshHarsha commented 6 years ago

Below is the code snippet - Version using 2.6.0

HTML :

<div [routerLink]="['./']" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" style="outline:none">
         <table>
             <tr>
                <td>Auto Publish</td>
                <td>
                    <angular2-multiselect
                        [data]="dropdownList"
                        [(ngModel)]="selectedItems"
                        [settings]="dropdownSettings"
                        (onSelect)="onItemSelect($event)"
                        (onSelectAll)="onSelectAll($event)"
                    >
                    </angular2-multiselect>
                </td>
            </tr>
        </table>
</div>

TS :

dropdownList = [];
selectedItems = [];
dropdownSettings = {};

constructor() {
          this.dropdownList = [
            { "id": 1, "itemName": 'Mumbai' },
            { "id": 2, "itemName": 'Bangaluru' },
            { "id": 3, "itemName": 'Pune' },
            { "id": 4, "itemName": 'Navsari' },
            { "id": 5, "itemName": 'New Delhi' }
          ];
          this.selectedItems = [
            { "id": 3, "itemName": 'Pune' },
            { "id": 4, "itemName": 'Navsari' }
          ];
          this.dropdownSettings = {
              disabled: false,
            singleSelection: false,
            selectAllText: 'Select All',
            unSelectAllText: 'UnSelect All',
            enableSearchFilter: false,
              badgeShowLimit: 1,
              enableCheckAll: false
          };
}

    onItemSelect (item: any) {
        console.log(item);
    }
    onSelectAll (items: any) {
        console.log(items);
    }

When i open the tab with this Multiselect, and try to select dropdown. and move to another page, i could see that my old ng-component(for multiselect dropdown) is still present and new one is getting appended

I know, if there is any error in the previous component the new component will get appended, but i am unable to see any error on the console.

When i run the code on local host its all fine. but when i run on the production server, i can see this issue

Also below Error, for few instances only:

main.90e11d0b5fd53b63c890.bundle.js:1 ERROR TypeError: Cannot read property 'disabled' of undefined at t.toggleDropdown (main.90e11d0b5fd53b63c890.bundle.js:1) at Object.handleEvent (main.90e11d0b5fd53b63c890.bundle.js:1) at Object.handleEvent (main.90e11d0b5fd53b63c890.bundle.js:1) at Object.handleEvent (main.90e11d0b5fd53b63c890.bundle.js:1) at Ki (main.90e11d0b5fd53b63c890.bundle.js:1) at main.90e11d0b5fd53b63c890.bundle.js:1 at HTMLDivElement. (main.90e11d0b5fd53b63c890.bundle.js:1) at t.invokeTask (polyfills.50b851ccd19aa9b94ce1.bundle.js:1) at Object.onInvokeTask (main.90e11d0b5fd53b63c890.bundle.js:1) at t.invokeTask (polyfills.50b851ccd19aa9b94ce1.bundle.js:1)

MRakeshHarsha commented 6 years ago

Also, if i remove multiselect and try with other elements in html, everything works Smooth.