Confusion around obtaining a ref to a Button/IconButton element

[gnapse]

When reading the documentation, I find it confusing that IconButton (doc) is documented to have a buttonRef and a rootRef props. What's the difference between those two? Also, why Button (doc) is documented to have none of those? And then ButtonBase (doc) has rootRef but no buttonRef.

Additionally, I find that in the release notes of v1.0.0-beta.27 rootRef is being removed from some components (although I don't see any button component being mentioned there).

Finally, while using these components under the latest release (beta.30) which is already after beta.27, I get buttons to work using rootRef, even when they don't have this prop documented. And I get icon buttons to work with buttonRef but not with rootRef, even when they have both documented.

So which one is it?

[oliviertassinari]

I have removed the ref properties form most of the components: #10025. It will be released in beta.31 this evening.
The documentation is implicit with the spread. For most use cases, you should use none of them. Just the ref.

[gnapse]

But the ref on a Button or IconButton does not give me the actual button dom element, which is what I need, and what I obtain via rootRef. What can I do to obtain the native button html element reference then?

[gnapse]

I see the linked recommendation, but how can you recommend switching over to use that, when the use of findDOMNode is being discouraged, and that api could be deprecated by React in the future? (see here)

[oliviertassinari]

when the use of findDOMNode is being discouraged, and that api could be deprecated by React in the future?

This documentation section was added with #9768. Another React issue to have a look at facebook/react#11401. It's suggesting the addition of a special "hostRef" prop that only works on host components (<div>, etc.). It would solve your problem. They are also discussing the deprecation of ref completely.

What can I do to obtain the native button html element reference then?

We can add a buttonRef property to the ButtonBase component in this case. Simple and scalable solution 👍. I have kept the inputRef property, It work nicely.
If you are uncomfortable with using findDOMNode directly, you can always abstract it.

[gnapse]

Ok, good to know about that other react issue. BTW, that one also does not recommend the use of findDOMNode. So I'm not sure I understand the direction this project is taking in officially recommending its use. Presumably is until React makes its mind about this hostRef thing. I'd still prefer to avoid the currently recommended solution to root refs since definitely all proposals seem to discourage the use findDOMNode.

I like the buttonRef support for both Button and IconButton. Looking forward to it. Thanks!

[oliviertassinari]

I like the buttonRef support for both Button and IconButton. Looking forward to it. Thanks!

Alright. Let's implement it :).

[chandhya]

Thanks for discussion thread on the issue
Read through the entire issue, but couldn't find the resolution I'm seeking!
@oliviertassinari , Using buttonRef property with IconButton, only returns null.
Is there a different property for using 'ref' related functionality? Can I create a codepen with an example, and share it here?

Would really appreciate a response, with any possible updates that have been made :)