Problem with FlexGrid component in strict mode react 18

Problem with FlexGrid component in strict mode react 18

Posted by: igor.tashevski on 22 March 2023, 11:47 am EST

• 

  igor.tashevski

  • Post Options:
  • Link
    Copy

  Posted 22 March 2023, 11:47 am EST

  Hi,
  
  We are having issues with fully migrating to react 18 and the new runtime.
  
  We have class based component that wraps wijmo flex grid component from @grapecity/wijmo.react.grid package, and when the new runtime is used in strict mode in development, the flex grid component is blank, even handlers on the rows are working, but clicking on any row its works like the first row is clicked.

  The issue is only in development mode with strict mode turn on.
  
  In production works good as it should.

  Latest react version: 18.2.0
  
  Node version: 19.1.0

  Installed packages:

       "@grapecity/wijmo": "^5.20222.877",
      "@grapecity/wijmo.grid.selector": "^5.20222.877",
      "@grapecity/wijmo.react.base": "^5.20222.877",
      "@grapecity/wijmo.react.grid": "^5.20222.877",
      "@grapecity/wijmo.react.grid.filter": "^5.20222.877"

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 22 March 2023, 9:23 pm EST

  Hello,

  Sorry, we could understand your issue properly, could you please provide more detailed information on the exact issue you are facing? if possible please share a small sample replicating your issue so that we can further investigate it on our end and assist you accordingly.

  We look forward to hearing back from you soon.

  Regards

• 

  igor.tashevski

  • Post Options:
  • Link
    Copy

  Posted 22 March 2023, 9:59 pm EST

  <FlexGrid
  					itemsSource={this.state.data}
  					initialized={this.gridInitialized}
  				>
  					<GridFilter
  						ref={this.gridRef}
  					/>
  					{this.state.data.length > 0
  						? Object.keys(this.state.data[0])
  								?.map((columnName: string, index: number) => {
  									return (
  										<FlexGridColumn
  											binding={columnName}
  											width='*'
  											header={columnName.replace(/([A-Z])/g, ' $1').trim()}
  											key={`${columnName}_${index}`}
  										></FlexGridColumn>
  									);
  								})
  						: ''}
  				</FlexGrid>

  The code above not working in react 18, when strict mode is enabled, the table is blank white background, but still the rows clickable (only the first time)

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 22 March 2023, 10:48 pm EST

  Hello,

  We have successfully reproduced the issue you reported regarding the grid rendering as blank. Please note that this is a known issue that has already been escalated to our Development team, and they are currently working on it with an internal tracking ID of WJM-24972.

  However, we were not able to replicate the issue of the rows only being clickable on the first attempt. We kindly request that you review the sample provided below and inform us if we have missed any relevant details:

  https://stackblitz.com/edit/react-wqccxp?file=index.js

  Our Development team is actively working on resolving the blank grid issue, and we will provide you with an update as soon as we receive more information from them.

  Thank you for your patience and understanding.

  Regards