Open xuhdev opened 4 months ago
Hey! Yeah, you're absolutely right, using title
for this purpose was not a good decision 😕. It could be changed in a major release some time. However, it's such a small change that I'm not sure if it alone warrants a breaking change release. It's a bummer to hear about that problem with the MUI tooltip. Could there be any other workaround for now 😕?
Thanks for the quick reply. I don't think it'll be a breaking change -- what's needed is a change in the underlying implementation that forwards the title
param and sets it as an HTML attribute. An easy (or maybe not-so-easy) way to fix it is to rename title
to something else, like shareTitle
when setting the HTML attribute. My gut feeling is that the fix can be applied some way around https://github.com/nygardk/react-share/blob/1d6cd0fd5b8c540be414982b615b72612c93f5e4/src/ShareButton.tsx#L83-L86, but I'm not so sure. If you can provide some hints, I'm happy to send a PR.
I don't think the problem is only with the MUI Tooltip. As the MDN link suggests, using title
as it is used now is incompatible with the standard and I would expect more problems with tooltips outside the MUI context.
For me, the best workaround is probably some patch that fixes the issue 😄
Ahha, I see it now! I misunderstood you at first. Makes sense.
Please check #531 if you think it would fix the issue for you!
This doesn't solve the MUI warning but I saw the title
prop has been removed from the button element :+1: . According to the MDN doc in the issue, I believe it is a proper fix on the react-share side -- looks like MUI also has a bug to properly detect title
. I'll talk to them on their side :smile:
Thanks for the fix!
Looks like, MUI Tooltip assumes that the component's props are spread to the underlying HTML element. It looks like the fix has to rename title
to something else. I'm thinking that providing an alternative name to title
might be a nice non-breaking fix, but it's up to you how much you would like to be compatible with MUI. If being compatible with MUI is not an objective, I'll figure out some other ways :)
Having said these, #531 is also a useful fix probably outside the MUI context.
To summarize, the whole story is:
The HTMLElement.title property represents the title of the element: the text usually displayed in a 'tooltip' popup when the mouse is over the node.
title
prop as the content of the tooltip.title
prop for some of the share buttons. This causes warnings when a share button's title
is specified and is wrapped with a MUI Tooltip.
MDN doc says:
However, react-share uses
title
for totally unrelated purposes IIUC. This makes it somewhat hard to put a tooltip with a different text on a share button in some cases.My Particular Example
If using with MUI Tooltip, I would get the following warning:
Code:
I see this warning legitimate due to the cited MDN doc above.