Dual list box has console error and not working in 22.2.5 version.

[Samir Varteji]

I have updated the service pack version to 22.2.5 and dual list box stopped working.

I have checked sample code as well and same error in the sample code. If you remove toolbar settings then its working fine without toolbar buttons.

Console error:

core.mjs:10614 ERROR TypeError: Cannot read properties of null (reading 'setAttribute')

    at ListBox.initToolbar (ej2-dropdowns.es5.js:14257:51)

    at ListBox.initToolbarAndStyles (ej2-dropdowns.es5.js:14426:14)

    at ListBox.onActionComplete (ej2-dropdowns.es5.js:14395:18)

    at ListBoxComponent.<anonymous> (ej2-dropdowns.es5.js:721:39)

    at ComponentBase.trigger (component-base.js:375:21)

    at ListBoxComponent.<anonymous> (ej2-dropdowns.es5.js:717:31)

    at ComponentBase.trigger (component-base.js:375:21)

    at DropDownBase.setListData (ej2-dropdowns.es5.js:677:18)

    at DropDownBase.initialize (ej2-dropdowns.es5.js:567:18)

    at DropDownBase.render (ej2-dropdowns.es5.js:1256:18)

@Component({
    selector: 'app-container',
    template: `<div class="e-section-control">
                <div class="dual-list-wrapper">
               <div class="dual-list-groupa">
               <h4>Group A</h4>
               <ejs-listbox [dataSource]="groupA" [fields]="setfield" height="330px" [toolbarSettings]="toolbar" scope="#listbox"></ejs-listbox>
               </div>
               <div class="dual-list-groupb">
               <h4>Group B</h4>
               <ejs-listbox [dataSource]="groupB" [fields]="setfield" height="330px" id="listbox"></ejs-listbox>
               </div></div>
               </div>`,
   
})

export class AppComponent {
    public groupA: { [key: string]: Object }[] = [
    { "Name": "Australia", "Code": "AU" },
    { "Name": "Bermuda", "Code": "BM" },
    { "Name": "Canada", "Code": "CA" },
    { "Name": "Cameroon", "Code": "CM" },
    { "Name": "Denmark", "Code": "DK" },
    { "Name": "France", "Code": "FR" },
    { "Name": "Finland", "Code": "FI" },
    { "Name": "Germany", "Code": "DE" },
    { "Name": "Hong Kong", "Code": "HK" }
];

public groupB: { [key: string]: Object }[] = [
    { "Name": "India", "Code": "IN" },
    { "Name": "Italy", "Code": "IT" },
    { "Name": "Japan", "Code": "JP" },
    { "Name": "Mexico", "Code": "MX" },
    { "Name": "Norway", "Code": "NO" },
    { "Name": "Poland", "Code": "PL" },
    { "Name": "Switzerland", "Code": "CH" },
    { "Name": "United Kingdom", "Code": "GB" },
    { "Name": "United States", "Code": "US" }
];
public setfield = { text: "Name" }
public toolbar = { items: ['moveUp', 'moveDown', 'moveTo', 'moveFrom', 'moveAllTo', 'moveAllFrom'] }
}

[YuvanShankar Arunagiri]

Hi Samir,

We are unable to replicate the issue in our end. For your reference, we have prepared the sample based on your provided code snippet with mentioned package version (22.2.5), Please refer the below sample link.

Sample link: https://stackblitz.com/edit/angular-hnu8km-kyygnv?file=package.json

If you are still facing issue, please share the issue reproducible sample or replicate the issue in our sample. Based on that we will check and provide you a better solution quickly.

Regards,

YuvanShankar A