How to use Introjs-react with Material UI Data Grids - and other deeply nested components

[juanp83]

Describe the bug

I'm using React, Material-UI, MUI DataGrids, and intro.js-react

I'm trying to give users a tour of a screen that contains a MUI DataGrid.

The steps in the tour involve highlighting specific elements within the MUI DataGrid.

My steps component looks like this:

<Steps
    enabled={stepsEnabled}
    steps={steps}
    initialStep={0}
    onExit={() => setStepsEnabled(false)}
    options={{ showBullets: false, showButtons: true, exitOnOverlayClick: true }}
/>

My steps object looks like this:

`const steps = [
{
  element: ".documentSetList",
  intro: "This is the doc review screen."
},
{
  element: ".introColumn2",
  intro: "this is a column."
}

];`

The first step highlights the entire Data Grid, which works fine. The second should highlight a column header within the Data Grid. The second step is not working. It seems like the IntroJS can't find the elements class, so the step just appears in the middle of the screen without pointing to the element.

I've tried using the built in css classes which looks like this:

MuiDataGrid-columnHeaderTitle css-1jbbcbn-MuiDataGrid-columnHeaderTitle

I've also tried adding a custom class with headerClassName property in the data grids column object, which looks like this:

`{
field: "col2",
headerName: "Column 2",
width: 150,
headerClassName: "introColumn2"

}`

Neither of these attempts have worked.

My guess is that this has something to do with how data grids and IntroJS are rendered, either that or IntroJS doesn't play nicely with deeply nested components, but haven't it figured out yet.

Any help would be appreciated.

To Reproduce

See example in the following code sandbox: https://codesandbox.io/s/datagrid-forked-5x7j7v?file=/src/App.tsx:598-702

Expected behavior

Intro.js-react should point to and highlight the entire data grid for the first step, and then it should point to and highlight just the column header for the second step.

How often does this bug happen?

Every time

System Info

MacOS Ventura 13.4
Brave Browser v 1.52.122

Additional Context

No response

[HiDeoo]

It looks like the grid header is just not rendered initially meaning that intro.js would not find it using the selector you provided and will fallback to render in the middle of the screen.

This hypothesis can be quickly tested by setting the initial value of stepsEnabled to false, and using a dirty timeout to toggle this value to true. Here is a demo of this test where we can see that the steps are rendering as expected.

It looks like this behavior is also described in this comment:

the headers and rows are only rendered once an internal ref is available, which happens in the 2nd render

The timeout workaround is only for validating the cause of the issue but I do not know @mui/x-data-grid to provide a proper workaround. I guess the best solution would maybe be this package emitting a ready event of some sort when the grid is entirely rendered and you could listen to this event and only enable the steps when this even is emitted.