Material-ui: [IconButton] rootRef returns incorrect value

[ianschmitz]

Expected Behavior

IconButton's rootRef property should return a value of the root DOM element.

Current Behavior

Button returns the correct DOM element value, but IconButton returns a ReactComponent instance.

Steps to Reproduce (for bugs)

See https://codesandbox.io/s/98687ll40r to reproduce. Look at console logs.

Context

I would like to use a Popover connected to an IconButton. This could be done in the onClick callback of the IconButton, but I stumble upon the bug when trying to use the rootRef prop.

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 1.0.0-beta.18 |
| React | 15.6.2 |
| browser | Chrome 62 |

[oliviertassinari]

This is on purpose, the rootRef property is returning a reference on the root element. If you are looking for the native button element, you can use findDOMNode().

[oliviertassinari]

Maybe we could add a buttonRef property.

[oliviertassinari]

Or maybe the rootRef property should return the root native dom element. But that's quite a large breaking change. We need to better understand the consequences of such change.

[ianschmitz]

Ahh that makes sense that it simply returns the root element whatever that may be. I made a naive assumption that it would behave the same as Button, which is my fault.

findDOMNode() will work just fine for me. buttonRef is interesting, i don't know how many others share the same use case.

I'm using TypeScript, so perhaps this could be a case for improving the typings of rootRef?

[oliviertassinari]

We have a inputRef property for input related fields. It's the only other use case I'm aware of. I would rather keep the current rootRef behavior as it can be handy to access public instance methods (we don't have much to be fair). I think that a buttonRef property is our best path going forward. So, if someone sees this comment and has the need for it, feel free to submit a PR :).

I'm using TypeScript, so perhaps this could be a case for improving the typings of rootRef?

I'm not aware of any TypeScript typing for callback properties. Maybe @sebald or @pelotom are.

[pelotom]

I'm using TypeScript, so perhaps this could be a case for improving the typings of rootRef?

It looks like currently both Button and IconButton have

rootRef?: React.Ref<any>;

which could certainly could be more specific. For IconButton I believe it should be

rootRef?: React.Ref<React.Component<IconButtonProps>>;

[eyn]

I've hit this before but just went to setting state in the onClick handler but having a buttonRef might lead to slightly nicer/more explicit code.