When I press on a day from the past the DatePicker automatically scrolls to the next/previous year. Please check the attached video. 

Is there any workaround for this issue ?

Dear Kendo,

I'm currently working on a data grid that has virtual scrolling enabled. When a user is scrolling fairly quickly, the screen will constantly flash white. See video in attachment.

I see this same behaviour in the example provided in the docs here: https://stackblitz.com/run/?file=app%2Fmain.jsx although it is slightly less noticeable.

What can we do to fix this?

Thanks in advance.

Kind regards,

Peter

Environment Details:
OS: Windows11 version 21H2 (OS build 22000.856)
Edge Browser version: 104.0.1293.47

Repro steps:
1. Open Code Pen: https://codepen.io/m1mrt/pen/VwXjEzJ page in Edge Browser.2. Run Axe dev tools3. Observe an issue that select element has an accessible name.

Actual Result:Select element does not have an accessible name.

Test Environment:

1. Go to system settings.

2. Navigate to 'Accessibility' and activate it.

3. Navigate to 'Contrast theme' and activate it.

4. Select 'Desert/Aquatic' High Contrast theme in the combo box.

Repro Steps:

1. Open given URL https://canvasjs.com/docs/charts/chart-options/axisx/viewport-minimum/ in Edge.

2. Graph page will be open. 

3. Turn on High contrast theme. 

4. Verify that Graphs are not adapting high contrast Aquatic and Desert modes or not. 

Actual Behavior:

Graphs are not adapting high contrast Aquatic and Desert modes. They remain same as in normal mode.  

Expected Behavior:

 Graphs should adapt high contrast Aquatic and Desert modes as defined. All elements should adapt to respective modes properly. 

Test Environment:

Build Dates & Run Dates range picker don't highlight days

Incorrect role as link is defined for header controls of 'Branches' table.

After applying filter or page number, the table content gets changed but the screen reader didn't inform about the same.

Repro-Steps:

Test Environment:

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.

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

We are currently passing a React.Node which contains both text and custom icons to the DropDownButton text property. The automatically generated aria-label of the DropDownButton returns [object Object] instead of any recognizable text.

Steps to Reproduce:

• Create a DropDownButton with text property set to a React.Node - eg:
  

<DropDownButton text={<div>test text</div>}>

• Inspect the DropDownButton aria-label value using the developer console
  

Expected Result:

aria-label contains the text inside the React.Node

aria-label="test text dropdownbutton"

Actual Result:

aria-label contains [object Object]

aria-label="[object Object] dropdownbutton"

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

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. 

Hello,

After updating the kendo version in my project to "^5.1.0" I've noticed that some errors are appearing in our console when we are trying to resize items in the Scheduler. 

"use-resize-item.js:53 Unable to preventDefault inside passive event listener invocation."

I have attached a video with the error.

Thanks!

A little thing, but users remember position of UI elements more than anything else. The filter buttons on the grid by default are not in the same place though for all filter types.

It would be preferable if the filter buttons were all on the same side, regardless of the filter type (e.g., some types put it on the left, while others put it on the right). Pictures below for context.

I've already log an issue on Github -> https://github.com/telerik/kendo-react/issues/1303

Submitting here as it is an important regression with React 18 and ReactDom.createRoot breaking Time picker.

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();
    });
});