Using array for multiple root nodes fails when interacting with tree (example included)

[thesirjay]

The feature to add in multiple root nodes via an array only works to display the initial tree. If you then interact with the tree it simply disappears. Example from the storybook if you change the default data to be an array as below clicking on any leaf or branch will cause tree to disappear.

export default [{
name: 'react-treebeard',
id: 1,
toggled: true,
children: [
{
name: 'example',
children: [
{ name: 'app.js' },
{ name: 'data.js' },
{ name: 'index.html' },
{ name: 'styles.js' },
{ name: 'webpack.config.js' }
]
},
{
name: 'node_modules',
loading: true,
children: []
},
{
name: 'src',
children: [
{
name: 'components',
children: [
{ name: 'decorators.js' },
{ name: 'treebeard.js' }
]
},
{ name: 'index.js' }
]
},
{
name: 'themes',
children: [
{ name: 'animations.js' },
{ name: 'default.js' }
]
},
{ name: 'gulpfile.js' },
{ name: 'index.js' },
{ name: 'package.json' }
]
}, {name: 'trial 2', id: 300, toggled: true, children: [ {name: 'example 2'}]}];

[beqramo]

same problem

[Ketler13]

@thesirjay @beqramo If you use example from docs, please, take a look at this screenshot:

the possible problem is in changing data type from initial array to object by assigning Object.assign().

Thank you

[thesirjay]

A good catch thank you - from brief testing that seems to be the trick.

I found 2 locations where it was doing the Object.assign() and changed both of them and the demo now works:

onToggle(node, toggled) {
const {cursor, data} = this.state;

    if (cursor) {
        this.setState(() => ({cursor, active: false}));
    }

    node.active = true;
    if (node.children) {
        node.toggled = toggled;
    }

    **this.setState(() => ({cursor: node, data: data}));**
}

onSelect(node) {
    const {cursor, data} = this.state;

    if (cursor) {
        this.setState(() => ({cursor, active: false}));
        if (!includes(cursor.children, node)) {
            cursor.toggled = false;
            cursor.selected = false;
        }
    }

    node.selected = true;

    **this.setState(() => ({cursor: node, data: data}));**
}