The Kendo UI Toolbar widget supports navigating between toolbar items using the TAB key if the navigateOnTab option is set to true. However, if the page is resized after the widget's creation so that more items are visible (i.e. not overflown) than before, those items are not reachable via keyboard.

This DOJO demonstrates this behavior: When the toolbar is created, the container is only 300px wide, which offers room for the first three items only. When setting the width back to "auto" afterwars, the rest of the items moves back out of the overflow menu, but cannot be focused.

Calling resize() does not help.

The Kendo UI Toolbar supports navigating between toolbar items uing the TAB key if the navigateOnTab option is set to true. However the overflow button which opens the overflow menu is not reachable by keyboard.

This DOJO demonstrates the behavior.

The Kendo UI Toolbar supports keyboard navigation between its items either via TAB/SHIFT+TAB or the RIGHT and LEFT arrow keys (documented here). However, there are some issues:

• While the arrow keys cycle endlessly, the user needs to be able the "escape" this cycle when using TAB, otherwise parts of the page would be inaccessible by keyboard. This "breakout" does not work when navigating backwards (SHIFT+TAB) in some scenarios as this DOJO demonstrates. Also, when focusing "After" and pressing SHIFT+TAB, the focus jumps to the splitButton instead of the overflow anchor which is inconsistent with the way TAB alone works.
• When the last visible (not-overflown) item is a separator after a splitButton, the overflow anchor is not focusable via TAB at all. This can be witnessed in this DOJO. However, when combining the items differently, everything seems to work fine.

Bug report
Toolbar splitButton togglable not working since version 2022.2.621Reproduction of the problem

Reproduction of the problem:

Dojo demo: https://dojo.telerik.com/EvOpoWaj

The toggle event does not fire for splitButton since the 2022.2.621 release

Expected/desired behavior
Toggle event shall fire

Environment
Kendo UI version: 2022.2.621 or newer
Browser: [all]

Hello,

In 2022.3.1109(but starting in 2022.1.119) using the Bootstrap v3 theme(not sure about any of the others), when you have a ToolBar inside a TabStrip, disabled buttons are invisible instead of greyed-out.

A demonstration can be found here: https://dojo.telerik.com/@Stephen/ESuKUqAD

It is due to the opacity being set incorrectly to 0 due to changes in the CSS rules, specifically there is a now a ".k-tabstrip .k-button.k-disabled" rule that has a higher specificity than the "old" rules.

Current/broken rules:

The rules in the last version it worked(2021.3.1207):

 

While I'm sure I can figure out a workaround, an official workaround/fix would probably be better.

 

Thanks.

Bug report

Adding an anchor tag styled as a Kendo button to the Toolbar via a template does not navigate to the set url.

Reproduction of the problem

1. Run this dojo.
2. The first item in the ToolBar - the anchor tag, styled as Kendo button - will not redirect to the specified url.

Expected/desired behavior

Clicking on the first item should navigate to the set url, similar to plain anchor tag or a button command.

Environment

• Kendo UI version: 2022.3.1109
• Browser: [all]

Bug report

A Form that has a Toolbar in it is being submitted if the Toolbar SplitButton is pressed.

Reproduction of the problem

1. Open this Dojo example - https://dojo.telerik.com/ixIjoWUq/3
2. Press the SplitButton.

Current behavior

The Form is being submitted

Expected/desired behavior

The Form should not be submitted

Environment

• Kendo UI version: 2022.2.621
• Browser: [all]

The Kendo UI Toolbar widget supports adding SplitButtons that can contain several options. By default, the dropDown with the options can be opened using ALT+DOWN when the SplitButton is focused. This works as expected. According to the documentation, pressing UP or DOWN should now move the focus to the next or previous item. This happens internally, but there is no visual clue for the user. It is impossible to know which item is currently selected.

This DOJO demonstrates the bug.

When a toolbar with several items is resized so that not all items can be displayed at once anymore, some items should be "moved" to the overflow container. I am, of course, assuming that these items have "overflow" set to "auto", which is the default value. As soon as at least one item is overflown, the overflow button should be displayed. This DOJO creates such an environment.

Now, when you resize the page so that the overflow is activated, you can see that not enough space is reserved for the overflow button. It is (first partially, then fully) hidden behind the rightmost item before this item is finally "moved" to the overflow container.

If you look closely, you can still see parts of the three dots behind the "Toggle" item.

Bug report

The overflow menu of the Toolbar gets hidden below one of its tools. This issue is replicable in scenarios with a lot of tools or when a Toolbar is opened on a small screen.

Reproduction of the problem

1. Open this Dojo example
2. Start resizing the window in which the Toolbar is loaded in a way its tools start to move in the overflow menu

Current behavior

At some point, the last visible Toolbar element is hiding the icon of the overflow menu.

Expected/desired behavior

The icon of the overflow menu should be constantly visible, no matter the number of elements in the Toolbar or the size of the screen.

Environment

• Kendo UI version: 2022.2.510
• jQuery version: x.y
• Browser: [all]

Bug report

The toggle function for the splitButton in the Toolbar are not working as of R1 2022.

Reproduction of the problem

1. Open this Dojo example - https://dojo.telerik.com/@martin.tabakov@progress.com/uNAvEkUy/2
2. Click on the Action 1 button.

Current behavior

The toggle function of the button is not executed.

Expected/desired behavior

The toggle function of the button should be executed.

Environment

• Kendo UI version: 2022.1.301
• Browser: [all]

Bug report

When a custom class is set using the items.menuButtons.attributes option, the custom class is applied, but the default 'k-link k-menu-link' classes are removed from the item

Reproduction of the problem

1. Open the example in the API - https://docs.telerik.com/kendo-ui/api/javascript/ui/toolbar/configuration/items.menubuttons#itemsmenubuttonsattributes
2. Inspect the first item in the menu button

Current behavior

The custom class is applied, but the item is missing the ''k-link k-menu-link' classes

Expected/desired behavior

The default classes should not be removed when a custom class is set.

The issue is a regression since 2022.1.119

Environment

• Kendo UI version: 2022.1.119
• Browser: [all ]

The title "more tools" when hovering over the button to show additional tools is not translated when a different culture/messages is loaded.

The problem can be seen on the following dojo link: https://dojo.telerik.com/UMOdULAM/2

Currently, the Toolbar widget does not have setOptions method. It will be good to have the possibility to change the widget configuration after initialization by using the setOptions method.

Bug report

The Toolbar's overflowAnchor property is missing from the Kendo typing definitions. It is also not available in the Toolbar's API.

Reproduction of the problem

Current behavior

Typing definitions for overflowAnchor are missing.

Expected/desired behavior

The overflowAnchor property should be available for the Toolbar and added to the API as well.

Environment

• Kendo UI version: 2019.2.619
• jQuery version: x.y
• Browser: [all ]

Method to reset the menuButton items of a toolbar's splitbutton dynamically or to have a datasource that can be refreshed/reloaded.

Bug report

This is a regression introduced in R1 2020. To reproduce it, set a menu button within a splitButton as initially hidden. Then show it with the ToolBar's show API method.

Reproduction of the problem

Dojo example.

1. Open the browser's dev tools console and run the example.

Current behavior

"btn2" is shown as expected, but a js exception is thrown:

kendo.all.js:91805 Uncaught TypeError: Cannot read property 'refresh' of undefined

Expected/desired behavior

No js exceptions

Environment

• Kendo UI version: 2020.2.513
• jQuery version: x.y
• Browser: [all]

In the KendoToolBar item configuration, there is currently a property called "overflow". The values of this property are: "never", "always", and "auto" (default). If the item.overflow value is set to "never" then the item remains in the toolbar and is not added to the overflow menu when the window shrinks. If the value is set to "always" or "auto", then the item is displayed in the overflow menu. The problem, however, is that sometimes you may want a toolbar item to disappear when the page shrinks, but you don't want or need it in the overlow menu.

A specific example is a toolbar item of type "separator". When the separator item.overflow is set to "auto", it adds a gap in the overflow menu between other items. I don't want this gap. Therefore, I set the separator item.overflow to "never". Unfortunately, this means that the separator remains on the toolbar. In the case where I have several separators in the toolbar with overflow set to "never", these all just stack up next to each other in the toolbar as the window is shrunk. I want them to disappear, but also not show up in the overflow menu. An overflow value of "hidden" could solve this problem.

BUG: setting a kendo ToolBar item.hidden with type of separator does not work. The separator is still displayed. For example:
```
$("#mytoolbar").kendoToolBar({
    items: [
        {
            type: "button",
            text: "button 1",
            hidden: true
        },
        {
            type: "spearator",
            hidden: true
        }
    ]
});
```

In this case, the button is hidden but the separator is not.

• Create a Toolbar with 2 SplitButtons in the Overflow
• Use Keyboard to open the Overflow Menu
• Keyboard Navigation is trapped in the first SplitButton and the second SplitButton can not accessed via Keyboard Navigation

See the following dojo: https://dojo.telerik.com/UtoTOcUD