This is a migrated thread and some comments may be shown as answers.

Clicking menu in IE 11 shows text from all items as selected item?

3 Answers 46 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Henrik
Top achievements
Rank 1
Henrik asked on 03 Apr 2017, 09:15 AM

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

Sort by
0
Ivan Danchev
Telerik team
answered on 04 Apr 2017, 08:19 AM
Hello Henrik,

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Henrik
Top achievements
Rank 1
answered on 20 Apr 2017, 01:36 PM

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.

0
Ivan Danchev
Telerik team
answered on 21 Apr 2017, 11:22 AM
Hello Henrik,

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Menu
Asked by
Henrik
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Henrik
Top achievements
Rank 1
Share this question
or