Progress® Kendo® UI for Vue Feedback Portal
Back to Feed
Request a Feature Report a Bug
Under Review
Last Updated: 31 Jul 2025 11:36 by ADMIN
Romain
Created on: 16 Jul 2025 08:34
Category: Kendo UI® for Vue
Type: Bug Report
1
Grid Column Menu auto-closes immediately when used inside a Dialog
Hello,

I’ve encountered an issue when using the KendoUI Grid component inside a dialog. When I try to open the column menu, it opens briefly and immediately closes itself, making it unusable.

This behavior seems to be related to a conflict with the UI component library I’m using (Ark UI). However, since the Grid’s source code is not open source, it’s difficult to pinpoint exactly where the issue originates or where a patch could be applied.

Reproduction:
Here is a minimal reproduction on StackBlitz: https://stackblitz.com/edit/rmldf7vs?file=src%2Fmain.vue

Expected Behavior:
When clicking the column menu button, the menu should remain open, allowing the user to interact with it.

Actual Behavior:
The column menu opens and instantly closes, without any interaction.

Notes:
- The issue only appears when the Grid is rendered inside a dialog.
- It might be related to focus/blur or click outside detection behavior conflicting between Kendo and Ark UI.
- Tested with the latest version of @progress/kendo-vue-grid.

Let me know if any additional details are needed!

Thanks!

4 comments
ADMIN
Filip
Posted on: 31 Jul 2025 11:36

Hi, Romain,

Thank you for the update.

The Kendo UI for Vue Natie Popup does have an appendTo property which can be used to change the container in which the popup will be rendered, however the suggested approach will require rendering the entire columnMenu from scratch in order to change the behavior.  While currently we don't have a full example which showcases how to render the entire columnMenu from scratch we have the following one which can be used as a starting point:

This approach will also require implementing filtering and sorting from scratch, which might be quite cumbersome. Let me know in case further questions arise on this matter.

Regards,
Filip
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Romain
Posted on: 24 Jul 2025 12:56

I received a detailed response from the ArkUI team with both an explanation and a workaround. Here's their analysis:

The issue is caused by how KendoUI's Vue Grid handles the columnMenu popup. By default, it uses the <Popup> component which teleports to the <body> (similar to appendTo="body" behavior). When the Grid is inside an ArkUI Dialog (which also uses a portal), the focus trap from the dialog causes the menu to close automatically.

Their suggested workaround involves:

  1. Creating a custom columnMenu renderer
  2. Setting appendTo={null} on the underlying Kendo <Popup> to disable the teleport
  3. This keeps the menu rendered in place rather than globally ported

Full technical details and code example: https://github.com/chakra-ui/ark/issues/3557#issuecomment-3113223461

The ArkUI team suggests that perhaps there's a way to customize the popup element's portal target on the KendoUI side. This could potentially be a configurable option to help with similar compatibility issues in the future.

Would love to hear your thoughts on this approach!

ADMIN
Filip
Posted on: 24 Jul 2025 09:22

Hello, Romain,

I thoroughly inspected the provided example and, after testing, it appears that the issue originates from the Ark UI library. I conducted additional research to identify any exposed props from Ark that might prevent the focus-stealing behavior, but none successfully resolved the issue. While Kendo UI for Vue components generally integrate well with other libraries, occasional compatibility issues may still occur. I recommend using the Kendo UI for Vue Dialog instead, as it does not exhibit the same issue:

If the Kendo UI for Vue Dialog is missing any features you find valuable in Ark UI, could you kindly share them? I'd be happy to explore potential solutions or custom implementations to help address your needs.

Regards,
Filip
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

ADMIN
Filip
Posted on: 23 Jul 2025 08:46

Hi, Romain,

We’re in the process of testing the runnable example but we’ll need additional time to conduct a thorough investigation and determine the root cause. I’ll update you within the next 24 hours as soon as I have more information on this matter.

Thank you in advance for your patience.

Regards,
Filip
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Create an account Log In
View
Type
Status
Category