Datagrid fails to render if added to virtual dom

[marienellagallo]

Package

Carbon for IBM Products

Description

Edge case that we see in SOAR when rendering Datagrid using virtual DOM.

const tableDomNode = document.createElement('div');
ReactDOM.render(, tableDomNode); // renders Datagrid with data

Component(s) impacted

Datagrid fails to render and an error is shown in console logs
chunk-OK4P3QOP.js?v=41e20ba8:3748 Uncaught TypeError: Cannot read properties of null (reading 'querySelector')

Browser

No response

@carbon/ibm-products (previously @carbon/ibm-cloud-cognitive) version

v2.21.0

Severity

Severity 1 = The design is broken in a critical way that blocks users from completing tasks or damages the brand. Affects major functionality, no workaround.

Product/offering

SOAR

CodeSandbox or Stackblitz example

https://stackblitz.com/edit/github-peuqjs?file=src%2FDatagridCrash%2FDatagridCrash.jsx,src%2Futils%2Fhelpers.jsx

Steps to reproduce the issue (if applicable)

Steps to reproduce

1. open stackblitz url
2. click View table

Expected results
Datagrid table is rendered in screen without any errors

Actual results
Table is not rendered and there is error in console logs

Release date (if applicable)

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate issues

[matthewgallo]

Hi @marienellagallo, just checking in. Is this still an issue for SOAR?

[amal-k-joy]

Hi @marienellagallo ,
The document.createElement() method in JavaScript is used to create a new HTML element. When this method is called, it creates an instance of the specified element type, but it does not add it to the DOM until you explicitly append it.

Once you add document.body.appendChild(tableDomNode);, datagrid will render I think.

[marienellagallo]

Hi @matthewgallo @amal-k-joy we've added fix for this