[List] Shouldn't hide when the component is controlled

[starInEcust]

Problem description

@davincho @oliviertassinari #4850

I found a bug in ListItem component.
set second item's props open = true, then click it to hide the third one. When hover the first ListItem, the second will reopen automatically;
I have read the source code and I found in line 421, handleMouseEnter will setState to change backgroundColor, but it will make child ListItem's componentWillReceiveProps setState according to it props in line 313

working code that reproduces the issue is

<List style={styles.menuStyle}>
                <ListItem
                    open
                    primaryText="1"
                    primaryTogglesNestedList
                    nestedItems={[
                        <ListItem
                            open
                            primaryText="2"
                            primaryTogglesNestedList
                            nestedItems={[
                                <ListItem
                                    primaryText="3"
                                />,
                            ]}
                        />,
                    ]}
                />
            </List>

Versions

• Material-UI:^0.16.1
• React:^15.2.1
• Browser: chrome 53

[davincho]

If you use open attribute, be sure to assign its value to a variable, otherwise the attribute's value will be uncontrolled. This means, as soon as a re-render happens ListItem will be opened again.
As shown in the example, you may register a callback with onNestedListToggle to reflect the toggled state within your component. Something like:

<ListItem open={this.state.open} onNestedListToggle={this.toggleVariable} />

[davincho]

Quick-and-dirty solution: http://www.webpackbin.com/VJdVy17xf

[oliviertassinari]

I found a bug in ListItem component set second item's props open = true, then click it to hide the third one.

Looks like the issue is right here. The third ListItem isn't supposed to hide as you are controlling it with the open={true} property.

@davincho Approach sounds correct 👍 .

[starInEcust]

Thank you for your prompt reply. According to your answer, I have solved my problem. But I do not think this is a good solution.

[oliviertassinari]

@starInEcust You can use the initiallyOpen property in case you don't want to control the component.

[starInEcust]

@oliviertassinari
I wrote a menu filter. A successful match will open the menu tree automatically. so I can't use the initiallyOpen property. And I do not want to control the listItem after it matched.