Unplanned
Last Updated: 19 Apr 2023 06:55 by ADMIN

In the following example:

https://stackblitz.com/edit/react-l3bszd?file=app%2Fmain.tsx

We have 2 events associated with 2 different resource items (in this case people - Peter and Alex). If we have only 1 resource item defined (e.g. Peter) we also see Alex's event in Peter's calendar group (column) which is incorrect.

However, as long as we have more than 1 resource item provided, grouping is done correctly (commented lines 21-23):

  1. If we provide Peter, Alex and John - we will correctly see both events in their respective groups (columns)
  2. If we provide only Peter and John we will correctly see only Peter's event in his column. Alex's event will no longer be shown as there is no such group
  3. If we provide only John and at least 1 more similar resource item that doesn't have any events associated with it - the calendar will be empty, which is again correct.
  4. However, if we provide only John resource item, we will INCORRECTLY see both Peter and Alex's events under his group (column).

My suspicion is that grouping was never tested with only 1 resource item, as it doesn't make much sense to group in that case. However, those groups also act as filters for events that do not have associated resource. We let our users to dynamically multi-select from a list of all available resource items so that they will see their events grouped only for the specified resource items. And if they select only 1 resource item from that list, they will see all events (for other resource items as well) incorrectly.

Unplanned
Last Updated: 26 Jul 2023 11:48 by ADMIN
Created by: Kyle
Comments: 3
Category: KendoReact
Type: Bug Report
5

In our unit tests, we sometimes want to be able to use the ByTestId methods of the React Testing Library to find bits of DOM created by a Kendo component.  However, setting a data-testid attribute (or really any data- attribute) on a Kendo component does not always result in the attribute appearing anywhere in the final DOM.

To demonstrate, below is a test suite (also included in the zip) where I tried putting a data-testid attribute on the Kendo components Input, TextArea, Checkbox, Slider, SliderLabel, MultiSelect, and DatePicker, then checked if the attribute appeared in the rendered DOM.  The tests for Input, TextArea, and Checkbox are successful.  The ones for Slider, SliderLabel, MultiSelect, and DatePicker are not.

import { render, screen } from '@testing-library/react';
import { Input, TextArea, Checkbox, Slider, SliderLabel } from '@progress/kendo-react-inputs';
import { MultiSelect } from '@progress/kendo-react-dropdowns';
import { DatePicker } from '@progress/kendo-react-dateinputs';

// SUCCEEDS
describe('Kendo Input', () => {
    it('supports data attributes', () => {
        render(
            <Input data-testid="the-input" />
        );

        const input = screen.queryByTestId('the-input');
        expect(input).toBeTruthy();
    });
});

// SUCCEEDS
describe('Kendo TextArea', () => {
    it('supports data attributes', () => {
        render(
            <TextArea data-testid="the-text-area" />
        );

        const textarea = screen.queryByTestId('the-text-area');
        expect(textarea).toBeTruthy();
    });
});

// SUCCEEDS
describe('Kendo Checkbox', () => {
    it('supports data attributes', () => {
        render(
            <Checkbox label={"Chad"} data-testid="the-checkbox" />
        );

        const checkbox = screen.queryByTestId('the-checkbox');
        expect(checkbox).toBeTruthy();
    });
});

// FAILS
describe('Kendo Slider & SliderLabel', () => {
    it('supports data attributes', () => {
        render(
            <Slider min={1} max={2} data-testid="slider-root">
                <SliderLabel position={1} data-testid="slider-label-1">One Fish</SliderLabel>
                <SliderLabel position={2} data-testid="slider-label-2">Two Fish</SliderLabel>
            </Slider>
        );

        const sliderRoot = screen.queryByTestId('slider-root');
        const sliderLabel1 = screen.queryByTestId('slider-label-1');
        const sliderLabel2 = screen.queryByTestId('slider-label-2');

        // test them all at once so we can know the full scope of our failure/success
        expect({
            sliderRoot,
            sliderLabel1,
            sliderLabel2
        }).toMatchObject({
            sliderRoot:   expect.anything(), // don't be null or undefined
            sliderLabel1: expect.anything(), // don't be null or undefined
            sliderLabel2: expect.anything()  // don't be null or undefined
        });
    });
});

// FAILS
describe('Kendo MultiSelect', () => {
    it('supports data attributes', () => {
        render(
            <MultiSelect data-testid="the-multi-select" />
        );

        const multiselect = screen.queryByTestId('the-multi-select');
        expect(multiselect).toBeTruthy();
    });
});

// FAILS
describe('Kendo DatePicker', () => {
    it('supports data attributes', () => {
        render(
            <DatePicker data-testid="the-date-picker" />
        );

        const datepicker = screen.queryByTestId('the-date-picker');
        expect(datepicker).toBeTruthy();
    });
});
While it is theoretically possible the problem is limited to just Slider, SliderLabel, MultiSelect, and DatePicker, I highly doubt it.
Unplanned
Last Updated: 03 Jul 2023 11:36 by ADMIN

https://codesandbox.io/s/keen-panka-vctttd?file=/app/main.tsx

In the attached video I am showing the steps taken to reproduce the bug from the reproduction link. Basically if you change the year in DatePicker's calendar - no matter which year you select - the year gets reset back to 1911. I was not able to reproduce this in Kendo's CodeSandbox examples until I noticed that they were using the legacy ReactDOM.render() instead of the new React 18's createRoot. As soon as I replaced it I was able to reproduce the bug.

Another strange observation is that I am able to reproduce this bug in only half of my tries after refresh, another colleague reproduces it in 20-25% of his tries, so it doesn't happen all the time but eventually it will. That's why I've recorded a video on a fresh reload of the attached reproduction. Also, you can sometimes see the year is already wrong after selecting it, or after subsequently selecting the month, or sometimes you don't see the year is reset to 1911 until after you select the specific date and the popup closes.

Although there are other ways to reproduce this issue, the one shown in the video is the easiest to hit the bad scenario. Also, we were not able to reproduce the issue on the DateTimePicker, although it seems to use the same Calendar component underneath.

Our assumptions having previously reported similar problems in Kendo after migrating to React 18 is that due to the concurrent rendering / batching of state updates in React 18's createRoot - something breaks the virtual scroll used in the calendar (in the video when I point to 1912 being the next year after the selected 2021, if we scroll a bit, the virtual scroll picks up and updates the incorrect years) so we end up with stale data for the year when selecting the month/date. This means that there might be other unwanted side effects that we just haven't stumbled upon.

This is a severe bug for our application's end users as they are unable to change the year in the date picker reliably. Falling back to the deprecated ReactDOM.render is not an option.

Unplanned
Last Updated: 05 May 2023 15:49 by ADMIN
Created by: Marcel
Comments: 2
Category: KendoReact
Type: Bug Report
3

Hello,

when using the StrictMode we get an UncaughtError when using the PopupComponent. Fe. when using the Date/Time-Picker.


ERROR
Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
    at checkForNestedUpdates (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:27287:11)
    at scheduleUpdateOnFiber (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:25470:3)
    at Object.enqueueSetState (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:14067:7)
    at Component.setState (webpack-internal:///./node_modules/react/cjs/react.development.js:355:16)
    at PopupWithoutContext.componentDidUpdate (webpack-internal:///./node_modules/@progress/kendo-react-popup/dist/es/PopupWithoutContext.js:285:18)
    at commitLayoutEffectOnFiber (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:23328:30)
    at commitLayoutMountEffects_complete (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24683:9)
    at commitLayoutEffects_begin (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24669:7)
    at commitLayoutEffects_begin (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24651:11)
    at commitLayoutEffects (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24607:3)


The above error occurred in the <PopupComponent> component:
    at PopupWithoutContext (webpack-internal:///./node_modules/@progress/kendo-react-popup/dist/es/PopupWithoutContext.js:97:28)
    at eval (webpack-internal:///./node_modules/@progress/kendo-react-popup/dist/es/Popup.js:38:67)
    at div
    at AsyncFocusBlur (webpack-internal:///./node_modules/@progress/kendo-react-common/dist/es/hocs/AsyncFocusBlur.js:30:23)
    at TimePickerWithoutContext (webpack-internal:///./node_modules/@progress/kendo-react-dateinputs/dist/es/timepicker/TimePicker.js:87:28)
    at eval (webpack-internal:///./node_modules/@progress/kendo-react-common/dist/es/hocs/withPropsContext.js:28:95)
    at component
    at Field (webpack-internal:///./node_modules/@progress/kendo-react-form/dist/es/Field.js:37:22)
  ...

Unplanned
Last Updated: 21 Dec 2023 11:40 by ADMIN
Created by: Owen
Comments: 4
Category: KendoReact
Type: Bug Report
3

Hello,

We've been experiencing a weird behavior with the date picker element. We wanted to have an auto advancing cursor that moves from date -> month -> year without the user having to manually press the arrow keys.

We based our solution off this previous method in your JQuery element. However the React element has some buggy behavior when it comes to updating existing date values in the input that makes this method impossible. (the functionality works correctly in the JQuery version of the library, just not React)

When updating an existing value in the box from a single digit value (e.g. 01, 02, 03, 04, but not 10, 11, 12) instead of overwriting the existing value it appends the new number the user entered. For example, if a 01, is in the box and the user types 2 it becomes 12, when it should have become 02.

This can be especially confusing for the user when working with named dates (e.g. "Jan", "Feb",  "Dec", etc) since they do not see the numbers involved. If the user is updating Jan, and they press 2. It should update to Feb not Dec...

I've attached a GIF of the problem below as I've described

Unplanned
Last Updated: 05 Aug 2021 05:43 by ADMIN
Repro-Steps:
  1. open the given URL using valid credentials.
  2. Navigate to 'Reply' button and invoke it.
  3. Navigate to 'color group' and invoke it.
  4. Now, Navigate to the colors in color group and listen to Narrator announcement.

Actual Result:

On navigating to colors, Narrator is staying mute and not announcing anything.

 

Expected 
On navigating to colors, Narrator should announce the name of the color.


User Impact 

When interactive elements have an incorrect name, it is difficult for people using assistive technology (like screen readers) to understand the purpose of control and its relationship to other content. 

Unplanned
Last Updated: 23 Jan 2024 16:38 by ADMIN
Scheduled for 2024 Q2 (May)
Repro-Steps:
  1. open the given URL using valid credentials.
  2. Navigate to 'Reply' button and invoke it.
  3. Navigate to 'table' button and invoke it.
  4. Now, try to navigate to table cells to select the size of the table and observe

Actual Result:

After invoking 'table' button, user is unable to select the size of the table i.e, Keyboard focus is not going to 'Insert row and column cell components.

Tab index property is not defined.

 

Expected 
Control(s) must be accessible to keyboards and other assistive technology. Common causes of this problem include a) the element does not have a proper role assigned, b) the element needs tab-index="0" attribute to be focusable, or c) the component is not registering keypresses.  

User should be able to navigate to insert row and column cell components to select the size of the table.


User Impact 
When interactive components are not accessible, assistive technology users are blocked, which leads to everything from inaccessible content, features, and functionality, up to entire applications or sites. 

Unplanned
Last Updated: 28 Jun 2022 12:01 by ADMIN
Created by: Daniel
Comments: 1
Category: KendoReact
Type: Bug Report
2
Current Behaviour

When an item, which has submenu, from the menu dropdown is hovered the submenu appears. But if you click on the hovered item the submenu disappears.

Expected Behaviour

When an item, which has submenu, from the menu dropdown is hovered and then clicked the submenu should stay visible.

MInimal Reproduction

I'm providing a reproduction from Kendo React code examples.

https://stackblitz.com/edit/react-jqhjyv?file=index.js

Unplanned
Last Updated: 26 Jul 2023 14:02 by ADMIN
Created by: Joca
Comments: 1
Category: KendoReact
Type: Bug Report
2

There is an issue with ComboBox remote virtualization.  This is reproducible on https://www.telerik.com/kendo-react-ui/components/dropdowns/combobox/filtering/#toc-filtering-with-remote-data-and-virtualization

Scroll slowly till almost the end of the list. Pay attention to the name: Paula Parente

Notice that the name keeps repeating after scrolling as the scroll goes back and forth. You'll need to scroll a few times more before the scroll continues to load

other items.

 


Unplanned
Last Updated: 28 Nov 2022 14:17 by ADMIN
Created by: Andrew
Comments: 1
Category: KendoReact
Type: Bug Report
2

Steps to reproduce:

  1. Create a notification and a button to toggle it
  2. Run a screen reader such as NVDA or JAWS
  3. Toggle the notification to appear

Expected result: The text in the notification is read by the screen reader when the notification appears

Actual result: The notification text is not read out

 

Unplanned
Last Updated: 27 Jul 2023 07:55 by ADMIN

https://stackblitz.com/edit/react-haejnu?file=app%2Fmain.tsx%3AL115

It is a common use case to provide Grid's dataItemKey property to make sure changes are properly reflected per documentation - https://www.telerik.com/kendo-react-ui/components/grid/api/GridProps/#toc-dataitemkey

However, when this accessor property is provided (usually a unique ID on all groups and items), Kendo uses it instead of its default auto-incremented `'ai' + absoluteIndex` key to index the <GridRow /> for each group's header and footer - giving them the same value and causing React to throw multiple warning about duplicate keys. This makes it unreliable to specify dataItemKey property when using the grouping feature with aggregate footers as it messes up with React's reconciliation mechanism.

Unplanned
Last Updated: 15 Nov 2022 11:33 by ADMIN
Unplanned
Last Updated: 27 Jul 2023 07:52 by ADMIN
Created by: Daniel
Comments: 7
Category: KendoReact
Type: Bug Report
1

Issue 1:

I've implemented insert table tool in the editor and I'm setting some states on editor blur. The bug appears when the editor is focused and I try to add a table. When I select the rows and cols from the dropdown  and click to insert the table the editor blur is called my setStates are called and somehow the table insertion doesn't happen. In order to add the table I should not focus the editor and I have to click on the insert table button and select again the cols and rows.

Issue 2:

In the same editor I've added tableResizing plugin. The bug appears when I already have a table in the editor and open the insert table dropdown to add a new one. In that moment when the dropdown is still opened I hover over some of the already inserted table cells borders the insert table dropdown is closed.

Issue 3:

When the editor is controlled we have undefined as initial value and then we type something or try to add table for example the editor crashes and throw an error `Uncaught RangeError: Applying a mismatched transaction`. Even though the value type allows undefined EditorProps.value?: string | Node | undefined. It works fine though if the initial value is empty string.

 

Package
"@progress/kendo-react-editor":"^5.11.0 | 5.12.0"

Minimal reproduction
I'm providing an vite + react + ts project. Steps to run the project:
npm install
npm run dev

It's reproducible in the provided examples in StackBlitz from Kendo, but the editor packages are not always resolved with turbo package manager. I guess it's the same issue as https://github.com/telerik/kendo-react/issues/1530

 

 

Unplanned
Last Updated: 28 Jul 2023 11:31 by ADMIN
Created by: David
Comments: 3
Category: KendoReact
Type: Bug Report
1

Hi,

Please see the following example of the Upload component being used to transfer a single file to a byte array:

https://stackblitz.com/edit/react-u2kbu9?file=app/main.tsx

Notice that all packages are latest including react 18 but I have not switched to the new createRoot API, and as per react documentation "Until you switch to the new API, your app will behave as if it’s running React 17" - this warning can be seen in the console window. When you upload a file, the FileReader onprogress and onload events result in the file being successfully uploaded with 100% progress. You can see current state and new state of all events in the console window.

Now please see the exact same example but switched to the new createRoot API:

https://stackblitz.com/edit/react-y8fuya?file=app%2Fmain.tsx

Notice that the warning is no longer visible in the console window. When you upload a file, the FileReader onprogress and onload events result in the file being successfully uploaded but the file progress is overwritten. You can see current state and new state of all events in the console window - the new state from the onProgress event is lost, and the new state in the onStatusChange event reports zero progress.

I believe this is because of automatic batching in React 18.

Kind regards,

David

 

Unplanned
Last Updated: 07 Jan 2022 12:17 by ADMIN

Actual results:

aria-label is not defined for ‘Reply editor’ when the keyboard focus is on 'Reply’ edit box narrator is announcing as “Editing End of line”.


Expected 
All components need an accessible name, ideally using semantic elements and attributes. In rare cases, aria-label or aria-labelled by may be needed to alter the name. Learn more by reading about the accessible name property. 


User Impact 
When interactive elements have an incorrect name, it is difficult for people using assistive technology (like screen readers) to understand the purpose of control and its relationship to other content.  

Unplanned
Last Updated: 13 Sep 2021 07:53 by ADMIN

Hi Team, 

###Current Behavior

When displaying checkboxes, they are not aligned for nodes with children vs. nodes without children

 

### Example

https://stackblitz.com/edit/react-rqvush?file=app/main.jsx

 

### Expected Behaviour

Nodes checkboxes should be aligned the same regardless of if they have children.

 

###Version

4.8.0

 

Thanks and Kind Regards,
Grant

Unplanned
Last Updated: 07 Jan 2022 11:22 by ADMIN
Created by: Kavitha
Comments: 1
Category: KendoReact
Type: Bug Report
1

Actual Result:

Given I have a conteneditable div component in my web application, when I run FastPass using Accessibility Insights for Web, I get the follow error message:

 

Snippet
<div aria-label="Post a question or answer" contenteditable="true" class="ProseMirror"><p data-prewrap="true"><br></p></div>
How to fix
Fix the following:
ARIA attribute cannot be used, add a role attribute or use a different element: aria-label

Expected behavior

Given I have a conteneditable div component in my web application, when I run FastPass using Accessibility Insights for Web, then I should not receive the following error message above

Unplanned
Last Updated: 07 Jan 2022 11:24 by ADMIN
Repro-Steps:
  1. open the given URL using valid credentials.
  2. Navigate to 'Reply' button and invoke it.
  3. Navigate to 'insert image' button and invoke it.
  4. Now, try to upload the image and observe

Actual Result:

User is unable to navigate to 'upload' button in 'insert image' dialogue. On invoking 'insert image' dialogue focus is navigating in the background and after navigating whole page then focus is going to the 'insert image' dialogue. Now, when user try to upload the image, focus is going out of the dialogue (going to the top of the page).

 

Expected Result:

Focus order should follow the meaningful reading order of the page and should return to previous elements when exiting a control.
On invoking 'insert image' dialogue, focus should be on the 'close' button of the dialogue and it should not navigate in the background.
While trying to upload the image, focus should go to 'clear selected files, upload and insert' buttons to upload the image.


User Impact:

When focus order does not follow the visible reading order, the experience can create a different interaction pattern, and/or unintended content relationships for assistive technology users. On rare occasions, there is a logical reason the focus order is different from the reading order, but the meaning of the content and interactions must remain the same. 


Unplanned
Last Updated: 14 Apr 2021 10:01 by ADMIN

Step by step instructions on how to reproduce the problem

Try entering a negative value in the filter column using the StackBlitz example here https://stackblitz.com/edit/react-dx7cna?file=app/main.jsx

 

This works using "ES" as locale (your example) https://stackblitz.com/run/?file=app/main.jsx

 

Github issue here https://github.com/telerik/kendo-react/issues/897

 

Unplanned
Last Updated: 27 Jul 2020 07:21 by ADMIN

With the ArcGauge component, when you set the rangeLineCap to something other than 'butt' (ie:  round or square), the indicator does not line up with the tick lines.  This leads to misleading values.  Please look at this StackBlitz:

 

https://stackblitz.com/edit/react-itztql

 

This will show the comparison between round and butt rangeLineCaps. 

From the screenshot as well, the ArcGauge on the right looks like the value is greater than 0, resulting in the user being mislead on the result.

1 2 3