React FlexGrid crashes when undefined style is applied

React FlexGrid crashes when undefined style is applied

Posted by: jschnurer on 22 April 2024, 2:45 am EST

• 

  jschnurer

  • Post Options:
  • Link
    Copy

  Posted 22 April 2024, 2:45 am EST

  I am using the FlexGrid in a React app. I have a variable that defines the desired height of the grid. This variable is of type string|number|undefined.

  I render the FlexGrid like this:

  <FlexGrid
    ...
    style={gridHeight !== undefined
            ? { height: gridHeight }
            : undefined
    }
  >
  ...
  </FlexGrid>

  This is the standard way to apply styles to a React component (such as a div). If the variable is undefined, send undefined to the style property of the component. When sending undefined in this way to the FlexGrid, it crashes with a massive error:

  70f9b32a-4ab8-4a86-b00c-3395a2dffd11: can’t assign to property “uuid” on “** Assertion failed in Wijmo: css parameter should be an object assert@http://localhost:3000/static/js/bundle.js:89968:13\nsetCss@http://localhost:3000/static/js/bundle.js:90358:9\n./node_modules/@mescius/wijmo.react.base/es5-esm.js/ComponentBase.prototype._setHostAttribute@http://localhost:3000/static/js/bundle.js:87596:63\n./node_modules/@mescius/wijmo.react.base/es5-esm.js/ComponentBase.prototype._copy@http://localhost:3000/static/js/bundle.js:87577:21\n./node_modules/@mescius/wijmo.react.base/es5-esm.js/ComponentBase.prototype.componentDidUpdate@http://localhost:3000/static/js/bundle.js:87362:10\ncommitLayoutEffectOnFiber@http://localhost:3000/static/js/bundle.js:196596:34\ncommitLayoutMountEffects_complete@http://localhost:3000/static/js/bundle.js:197931:38\ncommitLayoutEffects_begin@http://localhost:3000/static/js/bundle.js:197917:44\ncommitLayoutEffects@http://localhost:3000/static/js/bundle.js:197855:32\ncommitRootImpl@http://localhost:3000/static/js/bundle.js:200062:28\ncommitRoot@http://localhost:3000/static/js/bundle.js:199930:23\nperformSyncWorkOnRoot@http://localhost:3000/static/js/bundle.js:199362:17\nflushSyncCallbacks@http://localhost:3000/static/js/bundle.js:185539:26\nflushSync@http://localhost:3000/static/js/bundle.js:199449:11\nfinishEventHandler@http://localhost:3000/static/js/bundle.js:177359:9\nbatchedUpdates@http://localhost:3000/static/js/bundle.js:177377:9\ndispatchEventForPluginEventSystem@http://localhost:3000/static/js/bundle.js:182750:21\ndispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay@http://localhost:3000/static/js/bundle.js:179926:42\ndispatchEvent@http://localhost:3000/static/js/bundle.js:179918:88\ndispatchDiscreteEvent@http://localhost:3000/static/js/bundle.js:179891:22\n”: not an object

  I have worked around this bug by putting the FlexGrid inside a div and applying my style to the grid instead.

  I have attached a React Typescript component file that demonstrates the issue.
  
  TestGridPage.zip

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 23 April 2024, 3:41 am EST

  Hello,
  
  We are sorry but we are unable to replicate the issue at our end. Please refer to the following demo sample for reference.
  
  https://stackblitz.com/edit/stackblitz-starters-pbu8e1?file=src%2FApp.tsx,package.json,src%2Findex.tsx

  If the issue persists, please do share a small running demo sample depicting your issue with the steps to replicate if there are any so that we may investigate and assist you accordingly.

  Regards,
  
  Manish Gupta

• 

  jschnurer

  • Post Options:
  • Link
    Copy

  Posted 23 April 2024, 3:45 am EST

  You took my entire example, removed the part that breaks, and then tested it. You always set the grid’s style to

  {{height:"350px"}}

  and never set

  style={undefined}

  .

  I have updated your example to include my original select element that causes it to break.

  https://stackblitz.com/edit/stackblitz-starters-bhjsdl?file=src%2FApp.tsx,package.json,src%2Findex.tsx

  When you select the “undefined” value from the dropdown in this example, it crashes the grid.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 23 April 2024, 3:50 pm EST

  Hello,
  
  We are sorry for the inconvenience and thank you for your sample. We are able to replicate the issue at our end.
  
  In the further investigation we found that the code shared by you is setting the style to undefined instead of height that causes the issue for now.

  style={gridHeight !== undefined
            ? { height: gridHeight }
            : undefined
          }

  It has been forwarded to the concerned team for further investigation with the internal tracking id WJM-33792. We will update you on this as we have an update on this.

  In the meantime, please use the following code snippet, it will work for all of the the three cases of select:
  
  https://stackblitz.com/edit/stackblitz-starters-u2kpnx?file=src%2FApp.tsx,package.json,src%2Findex.tsx

  style={{ height: gridHeight }}

  Regards,
  
  Manish Gupta