Hi,
We are using Kendo UI Menu in our SPA solution and we are getting some strange behavior from the Menu component. The menu is configured to expand and show all items when the mouse-over event is fired.The items are added based on an API call and contains all the projects users of the solution has access to. If a user changes project and then click on the menu before the menu is able to expand, and while the menu is still selected from the previous project change, the text from all items in the menu is appended and shown as the selected item.
This only happens in IE11 and Edge, if I try to set IE11 to behave as IE10 the issue goes away. Chrome works just fine. If I run this in the dev env. I am able to get the same "chain of events" in Chrome if I just browser sync and use IE for interaction.
When debugging I can see that the select event for the menu is supplied with an "e" object where the "e.item.textContent" property is set to the text from all the items in the datasource.
Have you encountered this before?
3 Answers, 1 is accepted
We are not aware of such issue and it is not reproducible in our demos, thus the issue could be in your custom logic. Could replicate the behavior in question in a sample dojo and link it for further review?
Regards,
Ivan Danchev
Telerik by Progress
Rank 1
I would have to extract the majority of an entire Angular controller to get this up and running, in addition to some sort of API I can read from. Sadly I'm not permitted by time to do this.
Is there a way I can "remove" focus from the component after the select event? The reason for this is that the bug/issue does not happen if you click somewhere else before clicking the Menu component.
The Menu does not have a method in its API that removes focus from its items, but you can move it to another element with jQuery. Here's a sample dojo, in which the Menu is wrapped in an invisible div container. On selection the focus is moved to that div element and the k-state-focused class is removed from the selected item after a short delay. Note that the div needs to have its tabindex attribute set in order to be able to get focused and also a custom CSS rule sets its "outline" property to "none" to prevent the visual indication of it being focused.
Regards,
Ivan Danchev
Telerik by Progress