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.
As per the subject, you can no longer use the Calendar to select a date in a month before the currently selected Date. Please see the following demo:
https://stackblitz.com/edit/react-xc2oxm-wgsfhy?file=app%2Fmain.tsx
Steps to reproduce:
This error is not observed if you:
We aren't certain but don't believe this error was present before the latest Chrome 113 update. The error is reproducible in all versions of KendoReact from 5.2.0 onwards.
Users with low vision who rely on high contrast will not be able to distinguish between the checked and unchecked checkboxes in high contrast Aquatic/Desert themes.
Current Behaviour
When a table is created in the text editor and multiple columns are selected an error is thrown.
Errors:
TypeError: Cannot read properties of undefined (reading 'localsInner')
TypeError: Cannot read properties of undefined (reading 'eq')
Expected Behaviour
When a table is created in the text editor and multiple columns are selected an error must not appear and the user must be able to merge or split the cells.
MInimal Reproduction
I'm providing a reproduction from Kendo React code examples.
https://stackblitz.com/edit/react-su15wr?file=app%2Fmain.tsx
Package
"@progress/kendo-react-editor": "^5.11.0"
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
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
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)
...
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",
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.
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..
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.
Hi,
If you use kendo-theme-bootstrap for most Kendo React inputs, it results in bootstrap styling being applied to the input e.g. https://www.telerik.com/kendo-react-ui/components/dateinputs/datepicker/ or https://www.telerik.com/kendo-react-ui/components/dropdowns/combobox/. With the Bootstrap theme selected the DatePicker and Combobox have blue shadows on focus.
This is not true for the DropDrownList: https://www.telerik.com/kendo-react-ui/components/dropdowns/dropdownlist/. The border on focus does not match Bootstrap styling.
Kind regards,
David
After the latest accessibility improvements available with R1 2023 of the KendoReact library, the aria-required attribute is missing in most of the DropDowns.
The aria-required attribute should be rendered in the DOM once the MultiSelect definition contains a required attribute like this:
<MultiSelect required data={sports} onChange={onChange} value={value} />
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
I am using KendoReact Draggable and Droppable and we find a bug when using it. This bug even happen in the official demo.
The bug is described below:
When a droppable area is rendered out of the originall window size, the droppable cannot detect the onDragEnter() & onDropLeave(), of course onDrop neither.
it seems that kendo did not handle when user scroll while dragging the draggables, so that when the draggables was dragged to a zone out of the original window size, it failed to detect it.(Figure4)
I have also found another bug which is when you drag the draggables and scroll, the draggable will somehow detacted with the cursor, but I somehow already fixed it. Maybe it gives some hint for you to fix this bug, maybe.