innerRef is not working - throws React error

[sztrzask]

innerRef is not working on MenuList component.

Expected Behavior 🤔

innerRef works

Current Behavior 😯

innerRef throws this error:

Warning: Function components cannot be given refs. Attempts to access this ref will fail.

Check the render method of `WithStyles(List)`.
    in List (created by WithStyles(List))
    in WithStyles(List) (created by MenuList)
    in MenuList (created by Popper)
    in ClickAwayListener (created by Popper)
    in div (created by Paper)
    in Paper (created by WithStyles(Paper))
    in WithStyles(Paper) (created by Popper)
    in Transition (created by Grow)
    in Grow (created by WithTheme(Grow))
    in WithTheme(Grow) (created by Popper)
    in div (created by Popper)
    in Portal (created by Popper)
    in Popper (created by WithTheme(Popper))
    in WithTheme(Popper) (created by MenuListComposition)
    in div (created by MenuListComposition)
    in div (created by MenuListComposition)
    in MenuListComposition (created by WithStyles(MenuListComposition))
    in WithStyles(MenuListComposition)

Steps to Reproduce 🕹

Link:https://codesandbox.io/s/9lvnk027op

1. Click "Toggle menu grow"
2. Look at the codesandbox console

Context 🔦

I'm trying to access the underlying ul to get access to li elements to build autoscroller to selected one element

Your Environment 🌎

Tech	Version
Material-UI	v3.6.1
React	16.6.3

[oliviertassinari]

@sztrzask The innerRef property is applied on the List functional component. The warning is expected. You can use the RootRef component instead.

In the future, #10825 should provide a clean answer.

[franklixuefei]

I tried this as well, and seems like innerRef is not called when passed a function, as can be demonstrated using this code:

<Paper
    innerRef={(node) => console.log('+++', node)}
...