In an angular grid with batch edit mode on clicking tab for multiple times on required dropdown, we need to click twice on the dropdown to show values

[Lahari Navudu]

In an angular grid with batch edit mode which has some dropdown fields with required validation, if we click on tab for multiple times its showing validation message and if we click on dropdown to select dropdown values dropdown is not showing for the first click, for the second click we are able to see the dropdown.

for second click:

For some reference I have prepared a sample for it:

Add a row and click on tab for multiple times on the required dropdown fields and then click on dropdown for the first click its disappearing for the second click we are able to select.

https://stackblitz.com/edit/angular-ezt2sh-o6eqzw?file=app.component.ts

can you please show me a solution for it.

Thank you,

Lahari Navudu.

[Balaji Sekar]

Hi Lahari, 

Greetings from the Syncfusion support. 

We checked the dropdown is not showing the first click, for the second click we are able to see dropdown list and we suggest you to upgrade our latest package version it will overcome the reported problem. We have upgraded our package version in the provided a sample it is working properly. 

Please refer the below sample for more information. 

Sample link: https://stackblitz.com/edit/bsbe2i?file=package.json 

Please get back to us, if you need further assistance. 

Regards, 

Balaji Sekar 

[Lahari Navudu]

Hi Balaji Sekar,

I have upgraded the package to latest version but the dropdown issue is not yet resolved,

Can you please provide a solution for this issue.

Regards,

Lahari Navudu

[Sujith Kumar Rajkumar]

Hi Lahari, 

 

From the shared image we could see that you have used different versions for the Syncfusion component packages. This can create duplicate packages inside your application’s ‘@syncfusion’ package in the node modules folder which might be invoking different package version files causing the reported problem. So please follow the steps provided below to overcome this and install the latest packages, 

 

• Delete package.lock.json file from your application.  
• Remove the @syncfusion package folder from the node_modules.
• Use latest version or “*”(Installs the latest packages) for all Syncfusion components in package.json file.  
• Then install the NPM packages.

 

Once installed, clear the browser cache and try running the application and check if the problem is resolved. Also try opening it in other browsers. 

 

If problem still persists then it would be helpful if you could share the problem replication sample(since we are not able to replicate it from our end with the provided information) to identify your exact problem case and validate further based on that. 

 

Regards, 

Sujith R