[Components] Tooltip throws error when child is a component

[danieliser]

Description

When using the <Tooltip> component with an <Icon> as its only child is rendered it throws an error for passing ref to the component child.

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Wrapping the <Icon> with a simple <span> resolves the error.

Even with the error it still renders properly and continue working from what I can tell.

Step-by-step reproduction instructions

<Tooltip text="Some Text">
	<Icon
		className="control-icon"
		onClick={ () => {} }
		icon='hidden'
	/>
</Tooltip>

Add <span> to resolve it.

<Tooltip text="Some Text">
	<span>
		<Icon
			className="control-icon"
			onClick={ () => {} }
			icon='hidden'
		/>
	</span>
</Tooltip>

Screenshots, screen recording, code snippet

Environment info

• @wordress/env latest, after wp-env start --update, with gutenberg latest (not trunk) installed.

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[fabiankaegy]

I'm also running into this same issue

[talldan]

I guess this happens because Tooltip wants a ref for the Icon element, but Icon doesn't support forwarding refs.

Tooltip uses cloneElement to inject a ref, so it's not very apparent to the implementer that supporting refs is a requirement.

That's my technical feedback.

[danieliser]

I assume that's a neccesary requirement to prevent actually wrapping the element with extra html?