[Button] [ButtonLink] [Link] Support ref on Button / Link components

[heathervv]

Description

• Using React's ref attribute returns null when used on ButtonLink. Haven't tested on all other Button/Link type components, but I would assume it happens on them as well. It'd be great if these could support the ref attribute [ref={ (input) => { this.button = input } }] so that it's possibly to reference (and focus!) on the button for accessibility purposes.

Reproduction Steps

• Add ButtonLink component to app
• Add ref attribute ex ref={ (input) => { this.button = input } }
• Call this.button
• Observe that it returns null and no reference to DOM element

Version Number of TDS

0.29.0

[ryanoglesby08]

Thanks for the issue! Was looking into this a little bit this morning. I think this is also applicable to all our interactive components (Link, Button, Input, etc), so I'd like to drive towards a holistic solution.

Looking at the React docs, this seems to be the right path: https://reactjs.org/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components

[stale]

This issue has been automatically marked as stale because it has not had recent activity. The core team will be inclined to provide an update soon. If there is no activity after a few months, this issue will be closed. Thank you for your contributions.

[ryanoglesby08]

This recent React RFC for "innerRef" should make this feature much much easier! reactjs/rfcs#17

[marcod1419]

Hi @heathervv, I can't seem to reproduce this issue. Is this still a problem for you?

[heathervv]

@marcod1419 I haven't tested for this bug since March - we either didn't use TDS components if we required this feature, or sacrificed using refs! Sorry but I'm not able to tell you whether or not it's an issue still.

[marcod1419]

@heathervv Thanks for the quick response! I'll close this issue for now then. If you or your team ever come across it again, feel free to comment on here again and we'll take another look.