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();
});
});
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):
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.
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.
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
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)
...
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.
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.
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.
Steps to reproduce:
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
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.
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
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
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.
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:
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.
How to reproduce (video attached):
1) open combobox
2) scroll to end of the item list
3) select last item 4999
4) open combobox again
Expected behavior: I would like to see the item list.
Actual behavoir: I see white area.
https://www.telerik.com/kendo-react-ui/components/dropdowns/combobox/virtualization/#toc-basic-configuration
https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselect/virtualization/#toc-basic-configuration
https://www.telerik.com/kendo-react-ui/components/dropdowns/dropdownlist/virtualization/#toc-basic-configuration
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
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.
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
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
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
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
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