Dropdown not visible inside dialog after upgrade to v5.11.0

[Vivek]

Hi,

Dropdown is not visible in dialog after upgrade to v5.11.0. It used to work with v5.1.0.

With v5.1.0, dropdown's z-index is automatically calculated based on the dialog's z-index. With v5.11.0, the dropdown's z-index is always 100, which is lower than dialog's z-index.

Please advise.

 

Thanks.

[Wissam]

Hi, Vivek,

When upgrading to the latest versions of the components, you should also upgrade the version of kendo themes to the latest.

In the below example, I added a DropDownList inside a Dialog component where I am using the latest version ( `v6.0.3` ) of `kendo-theme-default` and it is rendered properly:

• https://stackblitz.com/edit/react-cquct9?file=index.html

I hope this helps, but please let us know if you have any further questions.

Regards,
Wissam
Progress Telerik

[David]

Hi,

We are having the same problem after upgrading from v5.8.0 to v5.11.0. We had an override in place as per the Popup Stack Order documentation, but that override stopped working in v5.11.0 unless we made it `!important`. We tried removing the override completely but no matter what we try the popup always appears behind the Dialog.

We upgraded components to v5.11.0 and @progress/kendo-theme-bootstrap to v6.1.0. If anyone has experienced anything similar and has managed to work out what the issue is that would be very helpful. Note that we are using packages as per the React Bootstrap Theme documentation rather than just linking to CDNs.

[David]

Hi,

Just thought I'd share a solution I discovered with you. I narrowed the change down to updating from v5.8 to v5.9. I believe some dependencies changed with this upgrade. Once I added all the required dependencies the DropDownList popups had their z-index calculated correctly and appeared in front of the Dialog.

This is why the issue couldn't be reproduced in StackBlitz - it won't let you add a package without also adding unmet peer dependencies.

Kind regards,

David

[David]

Some extra information: the documented package dependencies are incomplete. For example, the React Dropdowns dependencies section does not mention @progress/kendo-react-buttons or @progress/kendo-react-treeview but these are listed as peer dependencies in the package-lock.json file. Similarly @progress/kendo-react-popup is not mentioned in the React Data Grid dependencies section.

I recommend either examining the package-lock.json file or adding the packages you need in StackBlitz and seeing what is listed as an unmet peer dependency.

[Wissam]

Hello, David,

You are right, the KendoReact components require installing all their dependencies to function properly.

Thank you for pointing out that there are missing dependencies in the documentation pages of the DropDowns and Grid, we will update them.

In addition, I added 500 Telerik points to your account as a small token of gratitude for your report.

Regards,
Wissam
Progress Telerik