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