`TreeList` component renders no cell content

[danielturus]

I'm submitting a...

• Bug report

Current behavior

TreeList render no cell content on random page actions (in this case opening simple dialog).

Component: TreeList Version: 5.5.0

Expected behavior

TreeList should keep the same cell contents if no prop changed (with the same input should result same output)

Minimal reproduction of the problem with instructions

1. Open the provided example in StackBlitz https://stackblitz.com/edit/react-jm4qu7?file=Modal.js,CustomTreeList.js,data.js,index.js
2. Click on "Open simple modal" button
3. The TreeView content disappears from the view because of this line of code (I suppose)

if (this.prevColumns !== columns) {
            this.extendedColumn = readColumns(columns, { prevId: 0, idPrefix: idPrefix });
            this.columnsMap = mapColumns(this.extendedColumn);
}

Not sure here why two arrays are compared with equal, maybe that's the problem (this.prevColumns is of type Array, also column)

What is the motivation or use case for changing the behavior?

Environment

Browser:

• Chrome (desktop) version: latest version 104

System:

• TypeScript version: N/A
• Node version: N/A
• Platform: macOS

[danielturus]

From my findings, it seems that the component unmounts and then remounts (and because it unmounts, this.extendedColumn = [] runs, which causes all the issues).

You can see below some info: First render (did nothing on the UI):

Second render (after clicking an icon to expand a node):

On second rerender, this.prevColumns and this.extendedColumn have unexpected values.

[nstoychev]

From my test, it will work if you remove the strict mode.

I'll check this later.

[danielturus]

Indeed, thank you! A fix with strict mode enabled would be great though!

[nstoychev]

Adding this.prevColumns = []; into componentWillUnmount component lifecycle function resolves the issue. I'll make a pull request with this fix.

[nstoychev]

Fixed in version 5.8.0.

Example: https://stackblitz.com/edit/react-jm4qu7-zrpkfy?file=index.js