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: 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: 28 Jul 2023 11:39 by ADMIN

Hi Team, 

There is some unexpected behavior when resizing events after switching the Scheduler to 'Show Full Day'. Take a look at my sandbox, you'll notice, its barely anything, let alone anything fancy.

Replicate:
1. Create a new event that starts at 8am.
2. Switch the view to 'Show Full Day'
3. Using the start time resize handle and drag it up, to start earlier. And you will notice the dragItem actually drags down, and when you release the handle, the event appears in the correct place

This will only happen on the first resize when switching to 'Show full day'. You can replicate it more by switching back and forth between full day and business hours.

Similar Scenarios include:
1. Placing the event to end at 8am, switching to business hours and back, then drag the end time down, the dragItem will be positioned to start at 8am, but say its 7am and you will see the rest.
2. Placing the event to overlap 8am, will yield both problems.

Again this only happens on the first resize after switching views, and I've only tested it in DayView, so it might affect WeekView as well. There appears to be no issue when events overlap the endWorkTime.

Thanks,
Grant

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: 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: 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: 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: 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: 14 Jul 2023 07:09 by ADMIN
Created by: Valery
Comments: 1
Category: Data Grid
Type: Bug Report
0

The issue can be seen on your demo at https://www.telerik.com/kendo-react-ui/components/grid/

Steps: 

1) Load the demo from https://www.telerik.com/kendo-react-ui/components/grid/

2) Click on (x) in customerID grouping 

3) Look at the console and see the line with exception: 

The problem is that `e.originalEvent.target` is an svg object and it's className property is an object, not a string. The object is `SVGAnimatedString {baseVal: '', animVal: ''}` and it doesn't have the method indexOf.

 

Please fix asap.

 

 

 

 

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: 17 May 2023 13:10 by ADMIN
Created by: Kristiyan
Comments: 1
Category: Data Grid
Type: Bug Report
0

Hello,

 

Seems the link to the GridColumnMenu accessibility page from the DataGrid accessibility page is broken. 

Our tools are also warning us about empty links, caused by the GridColumnMenu button. How would we solve these?

Thank you,

Kristiyan Dimitrov

 

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: 27 Apr 2023 11:25 by ADMIN
Created by: RDot
Comments: 1
Category: ComboBox
Type: Bug Report
0
Is their a way to keep the iPhone keypboard form popping when the combobox has focus?

These are the things that have been tried -

  • Input attribute readonly = true.
  • Input keydown event return false.
    • Also added event listener with function to handleKeyPress and return false
  • Kendo attribute adaptive = true.
  • Input attribute inputMode = 'none'
  • Setting inputProps readonly = true and inputMode = 'none
  • Unplanned
    Last Updated: 27 Apr 2023 10:43 by ADMIN
    Created by: Aaron
    Comments: 1
    Category: KendoReact
    Type: Bug Report
    0

    Given the simple example:


    const RatingContainer = () => {
      const [ratingValue, setRatingValue] = useState(0);
    
      const clearRating = () => {
        setRatingValue(0);
      }
    
      const onRatingChange = (event) => {
        setRatingValue(event.value);
      }
    
      return <div>
        <Rating 
          value={ratingValue}
          onChange={onRatingChange}
        />
        <Button
          onClick={clearRating}
        >
          Clear
        </Button>
      </div>
    }
    
    export default RatingContainer;

    The Rating component behaves as expected when updating `ratingValue` through the Rating component. However, when I want to clear the rating value with the 'Clear' button to update the `ratingValue`, the number of stars displayed doesn't update reflect the value of `ratingValue`.

    Here is a subsection of my package.json file.


       "@progress/kendo-data-query": "^1.6.0",
        "@progress/kendo-drawing": "^1.17.5",
        "@progress/kendo-licensing": "^1.3.0",
        "@progress/kendo-react-animation": "^5.13.0",
        "@progress/kendo-react-buttons": "^5.13.0",
        "@progress/kendo-react-charts": "^5.13.0",
        "@progress/kendo-react-common": "^5.13.0",
        "@progress/kendo-react-data-tools": "^5.13.0",
        "@progress/kendo-react-dateinputs": "^5.13.0",
        "@progress/kendo-react-dialogs": "^5.13.0",
        "@progress/kendo-react-dropdowns": "^5.13.0",
        "@progress/kendo-react-editor": "^5.13.0",
        "@progress/kendo-react-excel-export": "^5.13.0",
        "@progress/kendo-react-form": "^5.13.0",
        "@progress/kendo-react-grid": "^5.13.0",
        "@progress/kendo-react-indicators": "^5.13.0",
        "@progress/kendo-react-inputs": "^5.13.0",
        "@progress/kendo-react-intl": "^5.13.0",
        "@progress/kendo-react-labels": "^5.13.0",
        "@progress/kendo-react-layout": "^5.13.0",
        "@progress/kendo-react-listview": "^5.13.0",
        "@progress/kendo-react-notification": "^5.13.0",
        "@progress/kendo-react-pdf": "^5.13.0",
        "@progress/kendo-react-progressbars": "^5.13.0",
        "@progress/kendo-react-tooltip": "^5.13.0",
        "@progress/kendo-react-treelist": "^5.13.0",
        "@progress/kendo-react-treeview": "^5.13.0",
        "@progress/kendo-react-upload": "^5.13.0",
        "@progress/kendo-svg-icons": "1.4.2",
        "@progress/kendo-theme-bootstrap": "^5.2.0",
    I also attached a screenshot capturing an example.
    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: 12 Apr 2023 22:57 by ADMIN

    If the datagrid inside popup is wider than max screen width, then there is no scrollbar to scroll it horizontally, which means user cannot see the whole datagrid.

    When I tried to somehow hack it and set max width of 100vw for the datagrid, then it partially worked - the content could be scrolled horizontally, but the header remained static; position of header cells didn't match positions of scrolled body cells, which would be confusing for the user.

    How to reproduce:

    1. Open this link: the componet preview

    2. Set screen width to 500px.

    3. Open the datagrid using the input arrow button.

    Result:

    The datagrid is truncated horizontally.

    Expected:

    The datagrid can be scrolled horizontally..

    Unplanned
    Last Updated: 22 Mar 2023 15:16 by ADMIN
    Created by: Tom
    Comments: 1
    Category: KendoReact
    Type: Bug Report
    0

    Hi,

    Not sure what the preferred way to report a problem is. I have posted it on GitHub as well:
    https://github.com/telerik/kendo-react/issues/1519

    Could someone help me out with this issue?

    Thank you in advance.

    Unplanned
    Last Updated: 28 Feb 2023 12:40 by ADMIN
    Created by: Ryan
    Comments: 3
    Category: TabStrip
    Type: Bug Report
    0
    When using the TabStrip component with the default animation feature the width of the TabStrip content area does not span the full width of the TabStrip component. Disabling the tab animation fixes the issue.
    Unplanned
    Last Updated: 31 Jan 2023 10:10 by ADMIN
    Created by: Daniel
    Comments: 1
    Category: KendoReact
    Type: Bug Report
    0

    Current Behaviour

    When I lock columns In data grid with resizable columns - for example 1st and 3th and resize the 1st one - after we scroll horizontally the 3th column goes on top of the 1st column. This happens when we haven't set a width prop.

     

    Expected Behaviour

    Resized columns not overflowing on each other when scrolling horizontally and don't have width prop.

     

    MInimal Reproduction

    I'm providing a reproduction from Kendo React code examples.
    https://stackblitz.com/edit/react-xvxy59?file=app%2Fmain.jsx

    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

     

    1 2 3