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

When typing into a date picker and trying to type Feb 29th, 2024 (or any other leap year ofc) the date is updated incorrectly by the kendo date picker validation. As the user types the year their previous entry of 29 is updated to 28. This should update check should probably not occur until the user is done updating the input. If there is some fix or workaround we can do on our end to resolve this issue please let us know

Here's a video of the bug in our application

However, I was also able to reproduce the exact same behavior even in the documentation:

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)
  ...

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

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.

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.

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.

Dropdownbutton doesn't work in FF 66.0.2 on maxOS

1. Click on the dropdownbutton
2. Clicking outside of the dropdownbutton menu
3. The dropdownbutton does not close

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.

Column locked with KendoReact Grid is not locked in the iPhone safari.  It's OK in Chrome phone simulator, but not in mobile. 

<Grid
                    style={{ height: '400px', width: '500px' }}
                    data={products}
                    reorderable
                >
                    <Column field="ProductID" title="ID" width="45px" locked />
                    <Column field="ProductName" title="Name" width="250px" />
                    <Column field="Category.CategoryName" title="CategoryName" />
                    <Column field="UnitPrice" title="Price" width="90px" />
                    <Column field="UnitsInStock" title="In stock" width="90px" />
                    <Column field="UnitsOnOrder" title="On order" width="90px" />
                    <Column field="Discontinued" width="120px" locked={true} />
                    <Column field="QuantityPerUnit" title="Additional details" width="250px" />
                </Grid>

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

Hi Guys,

In GridProps for KendoReact Grid there is an error in the type information:

Found here: https://www.telerik.com/kendo-react-ui/components/grid/api/GridProps/#toc-rowrender

In the GridProps.d.ts file it is:

    /**
     * Fires when a row is about to be rendered. Overrides the default appearance of the row.
     */
    rowRender?: (row: React.ReactElement<HTMLTableRowElement>, props: GridRowProps) => React.ReactNode;

This should be changed to:

rowRender?: (row: React.ReactElement<React.HtmlProps<HTMLTableRowElement>>, props: GridRowProps) => React.ReactNode;

Note that the React.ReactElement definition is:

    interface ReactElement<P = any, T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>> {
        type: T;
        props: P;
        key: Key | null;
    }

So the first type parameter should be the props typ.

I noted this while making use of it. After changing it it behaves sensibly. Worked around in my case by using 'as any' to void the type clash.

Cheers,

Stuart

There seems to be bug in the React Grid around date formatting inconsistencies:

Current behavior
When entering a date format of {0:dd/MM/yyyy} for a ColumnData prop, when in edit mode a calendar picker shows the date format as US date of MM/dd/yyyy.Expected behavior
The date should show as dd/MM/yyyy per the requested date format.Minimal reproduction of the problem with instructions
Create a Kendo grid with one column with following ColumnData:
const settlementDate: ColumnData = {
field: 'settlementDate',
title: 'Setlement Date',
format: '{0:dd/MM/yyyy}',
filterable: true,
filter: 'date',
editor: 'date'
};
Note that the date is displayed as MM/dd/yyyy
Change the format to "dd/MM/yyyy"
Note that when in view mode the date is displayed as "dd/MM/yyyy".
What is the motivation or use case for changing the behavior?
Currently I have to create a custom date cell for every instance of using a date field in my grid which is less than ideal.Environment
Package versions:
@progress/kendo-data-query@1.5.2
@progress/kendo-dateinputs-react-wrapper@2019.4.1014
@progress/kendo-base-component-react-wrapper@2019.2.606
@progress/kendo-drawing@1.6.0
@progress/kendo-dropdowns-react-wrapper@2019.4.1014
@progress/kendo-base-component-react-wrapper@2019.2.606 deduped
@progress/kendo-react-data-tools@3.9.0
@progress/kendo-react-common@3.9.0
@progress/kendo-react-dateinputs@3.9.0
@progress/kendo-date-math@1.2.0
@progress/kendo-react-buttons@3.9.0
@progress/kendo-react-common@3.9.0
@progress/kendo-react-popup@3.9.0
@progress/kendo-react-dropdowns@3.9.0
@progress/kendo-react-common@3.9.0
@progress/kendo-react-popup@3.9.0
@progress/kendo-react-grid@3.9.0
@progress/kendo-react-common@3.9.0
@progress/kendo-react-inputs@3.9.0
@progress/kendo-react-common@3.9.0
@progress/kendo-react-popup@3.9.0
@progress/kendo-react-intl@3.9.0
@telerik/kendo-intl@1.5.2
@progress/kendo-react-pdf@3.9.0
@progress/kendo-file-saver@1.0.7
@progress/kendo-theme-default@4.7.0
@progress/kendo-theme-material@3.5.0
@progress/kendo-ui@2019.3.1113Browser:Chrome (desktop) version 78.0.3904.108
System:
Platform: Windows

Other information:
It appears that there is an incompatibility as to what a text display field requires as opposed to what a date picker requires. For text display it requires a format of '{0:dd/MM/yyyy}' whereas the datepicker requires a format of "dd/MM/yyyy".

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. 

Defined a date rang. But it allows to enter a date larger than a max date of the range. Both via calendar and manually.

const minDate = new Date(1, 1, 1);
const maxDate = new Date(9999, 12, 31);

          return (
           
              <DatePicker value = {this.state.value}
                 
                  min={minDate}
                  max={maxDate}
                
              /> 
           

Description of the problem

In the Grid component with infinite scrolling, when a user scrolls down, the grid will bounce them back up to the first row when loading the next couple of rows. We get this same behavior in our application so it doesn't seem to be a mistake in the demo. We've encountered this issue in both version 1.x and the most recent version of Kendo.

To reproduce:

• go to the demo for this component;
• slowly scroll down in the grid component.

Code, screenshots, etc

Since this is also broken in the docs, I don't think it's necessary to add screenshots or code.