I am using Typescript and I have implemented a select column (check box select column) using the GridColumn and adding a "selected" property to each object in the array that is being bound to the grid (much like the example shows in the docs). Everything works great until I group by a column. At that point, I get a warning that is coming from one of the telerik js files (column file):
Warning: A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide between using a controlled or uncontrolled.
While this is just a warning and it goes away when using the production build of react, it is still something we would like to try to eliminate if possible. Has anyone else experienced this warning before and is there any solution for it?
1 Answer, 1 is accepted
Hello, Anthony,
Thank you for the information.
Could you please share an example of the approach that is used for the selection and the grouping?
We have new methods for selection and group persisting and an older approach from here. This will help us test with the same setup and log an item for fixing if needed.
Regards,
Stefan
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 1
Thank you for your response. It will be tough for me to provide a sample app for you, but hopefully I can share enough code to give you an idea of what we are doing.
First we get data from the server and added a selected property to the result with all values being false.
setEntityList(result.entities.map((item) => ({ ...item, selected: false })));
We have a Grid defined with the selectedField property set to "selected." We have a column in the grid defined as follows (you can ignore the headerSelectionValue prop, that has no bearing on the error we are getting):
/>
Everything works great until we group a column. We are then met with the following stacktrace:
react_devtools_backend.js:2574 Warning: A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components
at input
at td
at GridSelectionCell (webpack-internal:///./node_modules/@progress/kendo-react-grid/dist/es/cells/GridSelectionCell.js:30:47)
at tr
at GridRow (webpack-internal:///./node_modules/@progress/kendo-react-grid/dist/es/rows/GridRow.js:30:42)
at tbody
at table
at div
at div
at div
at div
at Grid (webpack-internal:///./node_modules/@progress/kendo-react-grid/dist/es/Grid.js:129:28)
....
If I had to guess I would say it is because there is no "selected" property on the new json that gets created with the group arrays. The selected property still exists in the nested array of the entity objects, but not on the higher level arrays of groups.
Hopefully this is enough to get you something to reproduce. If I need to provide more information I will be happy to do so.
Thanks!
Thank you for the extra details.
This may occur if the selected field is undefined for some of the items. Please share with us a sample JSON before and after the grouping. You can replace the sensitive data with 'test'.
The higher level arrays of groups should not affect this as their value is not used when rendering the rows. To have this effect the value has to be undefined in the actual data items that are used in the rows.
Rank 1
Hello,
Please find attached the pre-grouped and grouped json. It appears as though everything is correct based on the data, but we are still receiving the warning.
Hello,
Thank you for the JSON data. I made an example that will replace the Grid data from the not grouped to the grouped data, but the warning has not shown:
https://stackblitz.com/edit/react-zuldrj?file=app/main.jsx
As I'm not changing the values before grouping, please let me know if the warning is only shown if the user has selected a checkbox before grouping or in all cases?
Rank 1
Hello,
This warning occurs regardless of whether I start with an item selected before grouping or not.
I looked at your sample but could not tell if you were using the production build of react. This warning does not occur with the production build, only the development build.
Hello,
All StackBlitz examples are using a development built as they imitate a dev environment.
Could you please let me know the version of the KendoReact components that are used, as this may have been fixed in the latest one 4.8.0?
Rank 1
Hello,
We are actually on version 3.11.0. I need to figure out an upgrade path before upgrading to 4.8.0 so that we don't break anything. I will try to work through that.
Hello, Anthony,
I can suggest checking the changelog for version 4.0.0 as this is where we made the breaking changes. This will point to the places where issues could occur after updating:
https://www.telerik.com/kendo-react-ui/components/changelogs/ui-for-react/#87932bdc-aefb-56b4-81ed-6497a87c1848
Also, after version 4.0.0 there is required license activation which can be seen here:
https://www.telerik.com/kendo-react-ui/my-license/