IgrGrid - it caused an unhandled exception when the grid component had the emptyGridTemplate, width/height, and empty data in its props.

[jsakamotoIGJP]

Description

<IgrGrid> encountered an unhandled exception when the grid component had an emptyGridTemplate, width/height, and no data in its props.

Steps to reproduce

1. Create a React app.
2. Put the <IgrGrid> component in a page.
3. Specify an empty dataset for the "data" props, any value for the "width" and "height" props, and a rendering function for the "emptyGridTemplate" props to display when the data is empty.
4. Run the app.

Result

It caused an unhandled exception, as below.

TypeError: Cannot assign to read only property 'height' of object '[object Object]'
    at IgrGrid2.render (igr-grid.js:69:19)
    at finishClassComponent (react-dom.development.js:19781:31)
    at updateClassComponent (react-dom.development.js:19727:24)
    at beginWork (react-dom.development.js:21650:16)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
    at v10.invokeTask (combined.js:256:146)
    at f10.runTask (combined.js:164:39)
    at y5.invokeTask [as invoke] (combined.js:299:41)
    at O10 (combined.js:893:11)
    at Z7 (combined.js:911:19)

Expected result

The grid component should show the contents rendered in emptyGridTemplate.

Workaround

Specify width and height by the "styles" props instead of the direct props of the <IgrGrid>.

Remark

• I can reproduce this problem on the "Ignite UI for React" ver.18.6.0 npm packages.
• Meeting the following three conditions simultaneously is essential to reproduce this issue.
  • the grid has empty data in its data props.
  • the grid has the width or height props.
  • the grid has the emptyGridTemplate props.

Attachments

📦C-00236554-react-app1.zip