Toolbar.enable() should affect click events

[David]

Hello, I have a Menu widget as a child of a Toolbar.  I am disabling the menu using the following code:

myToolbar.enable(myMenu, false);

This correctly shows the menu widget as disabled (i.e. it's grayed out), but when I click the menu, it is still displaying the drop down menu under the button.  Shouldn't calling enable with a value of false cause click events to be ignored?  How can I accomplish this?

Thanks in advance

David

[Petar]

Hello David,

The reason for the reported behavior is that the Menu inside a Toolbar is being defined using a template. When you use a template to define elements in the Toolbar, you should use the methods of the defined widgets, not these of the Toolbar. In this case, we should use the Menu's enable() method. 

Please, check this Dojo example. 

The Toolbar in it contains a Menu widget with submenu and a regular toolbar button element. 

Button “Enable/Disable Repeat with toolbar.enable()” is using Тoolbar's enable() method to enable/disable the menu and the button in the Toolbar. This is the scenario when we don't use a template. 

Button ““Enable/Disable Menu with Menu.enable()”” uses Menu's enable( ) method and enables/disables all menu items. The way the method works is to enables/disables exact menu items, not the whole menu and this is why we work with the "li" tags of the #menu element. 

Please, try the provided approach in your project and check if it works for you. 
If the issue still exists, please send me a Dojo project representing it, so it would be easier to help you.

Looking forward to your answer. 

Regards,
Petar
Progress Telerik

[David]

Unfortunately, it didn't help. Even after calling the enable() method on the kendoMenu with the first menu item as an argument, I can still click on the button and it drops down the menu.  In the attached image, you can see where it appears lower in the z-order after clicking than it normally would.

[Petar]

Hi David.

Thank you for the screenshot and the new information. I’ve tried different scenarios in order to reproduce what is happening in your project. What I’ve managed to catch is a bit similar behavior, but still not the same as described. 

What I've done: Using the previous Dojo, I’ve added a second Toolbar with Menu inside it - check this Dojo. The Menu in the second Toolbar is being disabled using the .enable() method of the Toolbar(which is not a correct approach). When you disable the menu in the second Toolbar and click on it, the first element of the menu is being focused. This is expected behavior because by default we are also focusing the disabled elements, so they could be accessible from an accessibility point of view. Till now nothing unusual is happening, but when focused on the first Menu element, if you press the “Arrow down” keyboard button, the menu opens and this is the closest scenario in which we could reproduce your issue. Actually, the described could be also treated as expected behavior, because as demonstrated in the first Toolbar, if you disable the Menu with its .enable() method(not Toolbar’s enable() method), the menu is being disabled correctly. 

Based on the provided info and the described above scenario, our guess is that in some way the menu is not being disabled the correct way or when nesting the different components, some of the CSS styles are being overwritten, causing the unexpected behavior. Of course, this is only an assumption and the issue could be caused by something else. 

I’ve also discussed the issue with my colleagues from the Dev team. As it is quite unusual behavior, the easiest way to figure out what could be causing it is to ask you to reproduce the issue in an isolated Dojo example and send it to us.  

What could also help to identify the problem is to try the following and give us feedback if the issue is consistent:

• Try your project in different browsers and check if the behavior is the same
• Can you add a Test menu which doesn’t have child nodes and check if it is clickable after disabling it? 
• Is the Toolbar nested in other components? Can you make a copy of the Toolbar and put it in a separate tag and check its behavior? Is it there a change?

Looking forward to your reply. 

Regards,

Petar
Progress Telerik