Won't Fix
Last Updated: 28 Jul 2023 11:57 by ADMIN

I am using KendoReact Draggable and Droppable and we find a bug when using it. This bug even happen in the official demo.

The bug is described below:

When a droppable area is rendered out of the originall window size, the droppable cannot detect the onDragEnter() & onDropLeave(), of course onDrop neither.

it seems that kendo did not handle when user scroll while dragging the draggables, so that when the draggables was dragged to a zone out of the original window size, it failed to detect it.(Figure4)


I have also found another bug which is when you drag the draggables and scroll, the draggable will somehow detacted with the cursor, but I somehow already fixed it. Maybe it gives some hint for you to fix this bug, maybe.


Won't Fix
Last Updated: 28 Jul 2023 11:52 by ADMIN
Created by: TonyT
Comments: 3
Category: KendoReact
Type: Feature Request


I noticed in the PDF Export component limitations (https://www.telerik.com/kendo-react-ui/components/drawing/limitations-browser-support/) that it does not support iFrames. This is a major issue for us as we have data containing full HTML markup and <style> tags, which we want to embed in a PDF. We need to use an iFrame otherwise the styles will bleed into the rest of the document. Is there any plans to support iFrames in the future?

Won't Fix
Last Updated: 28 Jul 2023 11:48 by ADMIN
Created by: eDAD
Comments: 1
Category: KendoReact
Type: Bug Report

[Answers Community: Ask a question]: Unable to navigate and access the 'Remove' button using keyboard.

Test Environment:
Windows 11 OS version:22H2 22621.1992
Edge Version 114.0.1823.82(Official build) (64-Bit)

1.  Open https://www.telerik.com/kendo-react-ui/components/upload/url.
2.  Navigate to 'select files..' button using arrow key and invoke it using enter key.
3.  Upload any file.
4.  Now try to navigate using tab key and access 'Remove' button using keyboard and check whether its accessible or not using keyboard.

Actual Result:
Unable to navigate and access the 'Remove' Button using keyboard.

Expected Result:
User should be able to navigate and access the 'Remove' button using keyboard.

User Impact:
User with motor impairments who rely on keyboard will not be able to access 'Remove' button if user is not able to navigate to the button using keyboard.

Won't Fix
Last Updated: 18 Jul 2023 04:16 by ADMIN
Created by: Ryan
Comments: 2
Category: KendoReact
Type: Bug Report
The CSS styling of the Stepper component breaks when there is only 1 step defined. It may sound weird to only have 1 step but the items prop is an array and therefor should support 1 single step. Currently when only 1 step is defined the stepper bar extends like it's going to a 2nd step but just stops. It'd be nice if visually that progress bar just didn't show up if there was no 2nd step.
Won't Fix
Last Updated: 18 Jul 2023 03:48 by ADMIN


1. Create web component with shadow-root.

2. Attach all.css styles behide shadow root.

3. Add compoent with icon from WebComponentIcon font.


Icon are not displayed properly.

Won't Fix
Last Updated: 18 Jul 2023 03:47 by ADMIN
Created by: Vlado
Comments: 11
Category: KendoReact
Type: Bug Report

UPDATE: This is live code I prepared for you: https://stackblitz.com/edit/react-ts-dhhsaz?file=index.tsx

I get error:

 Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

But error appears to be inside KendoDrawer component. I can't figure out what is wrong. This is my component:

import React, { useState } from 'react';
import { withRouter, useLocation, useHistory } from 'react-router-dom';

import { Drawer, DrawerContent } from '@progress/kendo-react-layout';
import { Button } from '@progress/kendo-react-buttons';

export const SidebarDrawer = (props:any) => {

    const items = [
        { text: 'Povezivanje', icon: 'k-i-inbox', selected: true, route: '/povezivanje' },
        { separator: true },
        { text: 'Notifications', icon: 'k-i-bell', route: '/notifications' },
        { text: 'Calendar', icon: 'k-i-calendar', route: '/calendar' },
        { separator: true },
        { text: 'Attachments', icon: 'k-i-hyperlink-email', route: '/attachments' },
        { text: 'Favourites', icon: 'k-i-star-outline', route: '/favourites' }

    const [expanded, setExpanded] = React.useState(true);
    const [position, setPosition] = React.useState(true);
    const [selectedId, setSelectedId] = React.useState(items.findIndex(x => x.selected === true));

    let positionMode = position ? 'start' : 'end';

    const handleSelect = (ev:any) => {

    const handleClick = () => { setExpanded(prevState => !prevState); };

    const handleChange = () => { setPosition(prevState => !prevState); };

    const drawerProps = {
        expanded: expanded,
        position: positionMode,
        mode: 'push',
        items: items.map(
            (item, index) => ({ ...item, selected: index === selectedId })),

        onSelect: handleSelect,

    return (
        <Drawer {...drawerProps}>
        </Drawer >


export default withRouter(SidebarDrawer);

And this is how I use it inside App component:

import React, { useState } from 'react';
import { hot } from 'react-hot-loader';
import { Button } from '@progress/kendo-react-buttons'
import { Grid, GridColumn, GridDetailRow, GridToolbar } from '@progress/kendo-react-grid';
import '@progress/kendo-theme-bootstrap/dist/all.css';

import 'bootstrap/dist/css/bootstrap.min.css';
import { Drawer, DrawerContent } from '@progress/kendo-react-layout';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import urlConstants from 'ClientApp/constants/urlConstants'
import { Connecting } from '../containers/connecting/Connecting';
import SidebarDrawer from 'ClientApp/components/SidebarDrawer/SidebarDrawer';

export const App: React.FC = () => {

    return (
                        <Route exact={true} path="/" component={Connecting} />


export default hot(module)(App);
Won't Fix
Last Updated: 09 Aug 2022 07:28 by ADMIN

StackBlitz example: https://stackblitz.com/edit/react-vg8pu5?file=app/main.jsx


If you have a Form <Field component={Input}> inside an <ExpansionPanel>, if you press space or enter within the input, the expansion panel also receives the key event and will expand/collapse. It seems like these key events should not bubble out of the Field component.

Won't Fix
Last Updated: 31 Jul 2022 07:23 by ADMIN

In the Checkbox onChange callback, event.nativeEvent.target.checked seems to be set differently depending on whether the input was toggled by mouse click or by pressing space.

After clicking on the Checkbox, event.value and event.nativeEvent.target.checked will have the same value, consistent with the Checkbox's new state.

After pressing space with the Checkbox focused, event.value and event.nativeEvent.target.checked will have different values, with event.value containing the Checkbox's new state and event.nativeEvent.target.checked containing the Checkbox's old state.

I would expect event.nativeEvent.target.checked to be set the same way regardless of whether I am toggling the Checkbox with mouse or keyboard.  Furthermore, I would expect event.value and event.nativeEvent.target.checked to always be equal to each other.

I made a code sandbox to demonstrate the bug here: https://codesandbox.io/s/kendo-react-checkbox-bug-26f7ur

Won't Fix
Last Updated: 22 Jun 2022 21:08 by ADMIN
Created by: Tom
Comments: 6
Category: KendoReact
Type: Bug Report

When the listbox has many items (roughly 200 and growing) the item attribute makes the listbox act slow when you want to click the item.
Even if the item render only returns the same value as not setting the item attribute. It seems like all the items re-render when it gets clicked?

Also in this example https://www.telerik.com/kendo-react-ui/components/listbox/customization/ it is possible to drag and drop a custom item.
But this is not working when we copy exactly the same code from the example. The drag event gets triggered but nothing happens. 
Both lists have items to avoid this bug: https://github.com/telerik/kendo-react/issues/1300

I can post my source code but it is literally the same as the example. When we remove the item attribute the drag and drop works again. 

Won't Fix
Last Updated: 12 May 2022 11:58 by ADMIN
Created by: Joel Parker Henderson
Comments: 12
Category: KendoReact
Type: Bug Report
On this page: https://www.telerik.com/kendo-react-ui/getting-started/

The yarn example says...

yarn create react-app my-app

... which is old syntax and should not be used because of bugs.

Solution: update that line to use yarn download-and-execute (dlx) like this:

yarn dlx create-react-app my-app

Won't Fix
Last Updated: 10 May 2022 14:27 by Jeff
Created by: Jeff
Comments: 2
Category: KendoReact
Type: Bug Report

Set up a TimePicker with a `min` and `max`. For example

            min={new Date(0, 0, 0, 0, 0)}
            max={new Date(0, 0, 0, 5, 0)}

Click on the text input to focus the 'hours' portion.

Roll the mouse scrollwheel up/down to change the hours.

You can 'scroll' past 5:00 and set the time to anything above the max.

You can also use the keyboard to enter any number outside the min/max.

Is this the expected behavior? Do we always have to add our own validation to check the min/max ourselves?

Won't Fix
Last Updated: 24 Mar 2022 10:29 by ADMIN


The Telerik example for Inline Editing with Custom Editors uses a dropdown list with reference data hardcoded into the custom dropdown cell. This isn't a realistic scenario for for production code with dynamic reference data. If you pass the reference data for the dropdown to the custom cell then the dropdown loses focus every time you change the selected value. This can be seen by shifting the localizedData in the Telerik example referenced earlier from myDropDownCell.tsx to main and passing it as a parameter: https://stackblitz.com/edit/react-9ycz1i?file=app/main.tsx

Is there a workaround for this issue?

Kind regards,