Comments (6)
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 😕?
from react-share.
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
react-share/src/ShareButton.tsx
Lines 83 to 86 in 1d6cd0f
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 😄
from react-share.
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!
from react-share.
This doesn't solve the MUI warning but I saw the title
prop has been removed from the button element 👍 . 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 😄
Thanks for the fix!
from react-share.
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.
from react-share.
To summarize, the whole story is:
- MDN doc says:
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.
- Therefore, MUI Tooltip uses
title
prop as the content of the tooltip. - However, MUI Tooltip assumes that the component's props are spread to the underlying HTML element. Meanwhile, even after #531, react-share uses
title
prop for some of the share buttons. This causes warnings when a share button'stitle
is specified and is wrapped with a MUI Tooltip.
from react-share.
Related Issues (20)
- How to catch the event of sharing the link on facebook successfully or the user does not share? HOT 2
- defaultProps will be removed HOT 1
- Twitter Button Icon to X HOT 5
- EmailShareButton not working on safari web browser HOT 2
- Can not add any message to FacebookMessengerShareButton
- Support share to kakao talk
- react-share stopped working with react/ react-dom 17.0.2, and broken style text block showing in the twitter page HOT 6
- Missing `index.umd.cjs` in final build HOT 2
- Module not found: Error: Can't resolve 'react/jsx-runtime' in 'node_modules/react-share/dist' HOT 8
- While Sharing on Twitter the page says "Some error occured"
- Facebook Messenger not working
- type error HOT 1
- Any method is there which can return popup is blocked? HOT 1
- Feature Request - Support For Mastodon
- Not Working on Mobile browser HOT 2
- Can we send Image inside email body using 'EmailShareButton'
- disabled prop not working properly
- FacebookMessengerShareButton API Error Code: 4202 on mobile device HOT 4
- How to share multiple images on social media in react-share
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-share.