MultiSelectDropDown behaving strangely after checkbox mode enabled

[Ignacy Mielniczek]

Hello,

I am using Syncfusion's ej2-angular-dropdowns v. 24.2.4 component on my project. Unfortunately, I have noticed the ejs-multiselect component behaving strangely when we add [mode]="'Checkbox'" on the template side. For example:

1. The preselected items are not rendering if the ejs-mutliselect is added on the other than the first tab of the ejs-tab component
2. Sometimes the loaded data list loses some of its elements, even though the datasource has not been modified. It can be seen if there are a few ejs-multiselect components added and checkbox modes are enabled on them

Could you please help me with these problems?

Best regards,

Ignacy Mielniczek

[Yohapuja Selvakumaran]

Hi Ignacy Mielniczek,

Thank you for reaching out to us. We have validated the reported issue but were unable to replicate it on our end. The MultiSelect component appears to be functioning as expected. For your reference, please review the sample provided below:

Sample:  https://stackblitz.com/edit/github-9zxqpc-wlia8b?file=src%2Fapp.component.ts

To help us better understand and replicate the issue, could you please provide the following details:

1. A description of the strange behavior you are experiencing with the MultiSelect component. If possible, please share a video illustrating the issue.

2. Confirmation if this issue only occurs when rendering the MultiSelect inside a tab component, or if it also occurs with a standalone MultiSelect component.

3. The code snippet of your MultiSelect component. If possible, please modify the shared sample to replicate the reported issue.

Your assistance in providing these details will greatly help us in identifying and resolving the issue. Thank you for your cooperation and patience.

Regards,

Yohapuja S

[Ignacy Mielniczek]

Hello Yohapuja,

Thanks for the reply. Here are my answers to the bullet points:

1. I'm afraid I cannot share the video representing the exact configuration because of NDA.
2. The strange behaviors can be observed only on MultiSelect components within the tabs which are not rendered and shown their contents by default. For example: If the tab component has 3 tabs named "1st tab", "2nd tab" and "3rd tab", then the problem will occur inside the "2nd tab" and the "3rd tab" tabs assuming the "1st tab" renders as default open tab.
3. For your convenience, I have attached sample package.json and template.html files. I've tried to modify the sample on Stackblitz, but unfortunately, I couldn't somehow render the tab component correctly.

Best regards,

Ignacy Mielniczek

Attachment: MultiSelect_issues_inside_tab_95dff4fa.7z

[Yohapuja Selvakumaran]

Hi Ignacy Mielniczek,

Thank you for sharing the package.json and HTML files with us. Based on the code snippet you provided, we have created a sample project to replicate the issue. However, we were unable to reproduce any strange behavior with the MultiSelect component in our testing.

For your convenience, we’ve created a sample project that demonstrates how the MultiSelect component behaves in our environment. You can review it using the following link:

Sample: https://stackblitz.com/edit/angular-ghsmqa-edepcu?file=src%2Fapp.component.html,src%2Fapp.component.ts,package.json

1. Additionally, we tested the MultiSelect components within a tabbed interface, and everything worked as expected. To provide further clarity, we’ve included a video illustration that showcases the behavior of the components in our sample.
2. After carefully examining your package.json file, we noticed that you are using an older version of the package. We strongly recommend upgrading to the latest version to ensure optimal performance and to avoid potential issues that may arise from using outdated dependencies.
3. Please review the provided sample and video. If the issue persists after upgrading to the latest version, or if you notice any other discrepancies, kindly let us know. We’re here to assist you and will provide further guidance as needed.

Regards,

Yohapuja