Toolbar's show() and hide() method do not properly toggle items visibility in the overflow popup.
Case 1: https://dojo.telerik.com/aXEyIrEW/6
The 'Button' is visible in both the Toolbar and the overflow popup initially.
Case 2: https://dojo.telerik.com/erEnafir/39
When the Toolbar is resized so that the 'Dashboard' button is not visible, the 'Dashboard' button is also not visible in the overflow popup.
The Toolbar's overflowAnchor property is missing from the Kendo typing definitions. It is also not available in the Toolbar's API.
Typing definitions for overflowAnchor are missing.
The overflowAnchor property should be available for the Toolbar and added to the API as well.
Describe the bug
In IE11 on resizing horizontally the browser window, the text of the ToolBar's tools overlaps.
To reproduce
Steps to reproduce the behavior:
The tools size is not properly calculated and text overlapping can be observed (see the screenshot linked below). Overflow hidden is not set to the button tool and the k-input elements are resized on resizing the browser window.
The following CSS rule can be used as a workaround:
.k-toolbar .k-button,
.k-toolbar .k-input {
overflow: hidden;
flex: 0 0 auto;
}
Expected behavior
The ToolBar tools should properly resize on browser window resize. No text overlapping should occur.
Screenshots
Screenshot.
Affected package (please provide)
Affected suites (please provide)
Affected browsers (please provide)
Build system information (please provide)
Additional context
N/A
I tested the toolbar example https://demos.telerik.com/kendo-ui/toolbar/keyboard-navigation with a keyboard and screen reader (NVDA) and found the following issues:
1. Buttons are rendered as links. The SR announces the first button as "Button visited link". Apparently, there is an undocumented option useButtonTag (https://github.com/telerik/kendo-ui-core/issues/4730) that's also missing from the typings. I have to manually add 'role: "button"' to every single button to make my toolbar compliant.
2. Toggle buttons state is not announced.
3. The overflow menu button has no caption and is announced by the SR as "blank".
4. The overflow menu button has no visible focus styling (screenshot attached).
5. Selecting an item from the overflow menu throws the focus out of the page.
See the following dojo: https://dojo.telerik.com/UtoTOcUD
The documentation at https://docs.telerik.com/kendo-ui/api/javascript/ui/toolbar/configuration/items.menubuttons does not mention the children of a splitButton can have their own click handlers. It's not present in the typings either.
However, this does work: https://dojo.telerik.com/@GaloisGirl/UYeBewEX
Somewhat related is this bug: https://github.com/telerik/kendo-ui-core/issues/4542 . Documenting the behavior would be useful in accurately describing this bug.
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.
Dojo example.
"btn2" is shown as expected, but a js exception is thrown:
kendo.all.js:91805 Uncaught TypeError: Cannot read property 'refresh' of undefined
No js exceptions
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
The Typescript definitions for Kendo UI define the kendo.ui.ToolBarOpenEvent as follows:
interface ToolBarEvent {
sender: ToolBar;
preventDefault: Function;
isDefaultPrevented(): boolean;
}
interface ToolBarOpenEvent extends ToolBarEvent {
SplitButton?: JQuery | undefined;
}
The event is also documented that way in https://docs.telerik.com/kendo-ui/api/javascript/ui/toolbar/events/open. However, the corrersponding method in kendo-toolbar.js:446-453 does the following:
open: function (e) {
var isDefaultPrevented = that.toolbar.trigger(OPEN, { target: element });
if (isDefaultPrevented) {
e.preventDefault();
return;
}
that.adjustPopupWidth(e.sender);
},
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
The custom class is applied, but the item is missing the ''k-link k-menu-link' classes
The default classes should not be removed when a custom class is set.
The issue is a regression since 2022.1.119
The toggle function for the splitButton in the Toolbar are not working as of R1 2022.
The toggle function of the button is not executed.
The toggle function of the button should be executed.
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.
At some point, the last visible Toolbar element is hiding the icon of the overflow menu.
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.
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.
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.
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:
A Form that has a Toolbar in it is being submitted if the Toolbar SplitButton is pressed.
The Form is being submitted
The Form should not be submitted
Adding an anchor tag styled as a Kendo button to the Toolbar via a template does not navigate to the set url.
Clicking on the first item should navigate to the set url, similar to plain anchor tag or a button command.
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
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]
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.