big-design
big-design copied to clipboard
bigcommerce
Tooltip no longer works other components, just Buttons
On the latest version (0.34.1) of big design, using a Text or Badge component no longer works as a trigger for the Tooltip. I upgraded from 0.30.2 which worked fine. However, 0.34.1 now returns the below warning and no tooltip is displayed.
_vendor.js:183048 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
Check the render method of `Reference`._
To reproduce the bug, use the Text or Badge component as the trigger:
<Tooltip placement='auto' trigger={<Text>Hello</Text>}>
HELLO FROM TOOLTIP
</Tooltip>
I would expect no error and the tooltip to show as it previously did.
However, using a <Button>Text</Button> as a trigger resolves the warning and displays the tooltip.
Thanks @tomzweb for reporting this!
On the surface, it looks like we just need to forward the ref to our Text component.
I upgraded from 0.30.2 which worked fine.
This sounds like a transient dependency caused it to break. I tried to replicate this in a CodeSandbox and was still getting the same issue in 0.30.2 🤔 If you could replicate it working in a CodeSandbox, that'd be super helpful to understand the underlying issue of why it was working before 🙏
@chanceaclark 0.30.2 working here: https://codesandbox.io/s/silent-rain-kxqcdb?file=/src/App.tsx using React 18 and styled-components 5.3.6. Though I can confirm 0.30.2 was also working on our project using React 17 and styled-components 5.3.5
And 0.34.1 here: https://codesandbox.io/s/amazing-joana-z5th59?file=/src/App.js which is showing the error in the console log.
Same issue here using a Badge or Text component as the trigger.
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
Check the render method of `Reference`.
Badge@http://localhost:2000/static/js/bundle.js:29870:11
"react": "^18.2.0",
"@bigcommerce/big-design": "^0.36.0",
