ReactTooltip / react-tooltip

React Tooltip Component
https://react-tooltip.com/
MIT License
3.59k stars 528 forks source link

Safari mobile browser gets the error e.getAttributeNames #1167

Closed GreenEyeInvestor closed 8 months ago

GreenEyeInvestor commented 8 months ago

I use Next.js A very useful library, but there are some problems that I found from the logs sent by the error logger to the server. I got big failures in browsers with the headers "Mozilla/5.0 (Linux; U; Android 7.1.1; zh-CN; MZ-MX6 Build/MRA58K) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/57.0.2987.108 MZBrowser/8.5.110-2021020110 UWS/2.15.0.4 Mobile Safari/537.36"

Users of these browsers receive an error TypeError error: e.getAttributeNames is not a function\n

As I understand it, they don't have getAttributeNames support, and there are a lot of such users. Because of this, they cannot use the site. Is there a way to replace getAttributeNames with something more cross-browser, or will you have to install some kind of polyfill?

Next.js generates this in its /.next directory during the build of the project, here is a piece of code from .getAttributeNames() //... [eg,eS]=(0,o.useState)(null),eE=(0,o.useRef)(q),{anchorRefs:eT,activeAnchor:ek}=f(e),eA=e=>null==e?void 0:e.getAttributeNames().reduce((t,r)=>{var o;return r.startsWith("data-tooltip-")&&(t[r.replace(/^data-tooltip-/,"")]=null!==(o=null==e?void 0:e.getAttribute(r))&&void 0!==o?o:null),t},{}),eO=e=>{let t={place:e=>{ee(null!=e?e:d)} //....

gabrieljablonski commented 8 months ago

I might be wrong, but that looks like a rather outdated user agent string. getAttributeNames() seems to currently have pretty decent browser support overall:

https://caniuse.com/?search=getAttributeNames

Not sure it makes sense for us to polyfill for such an outdated set of browsers. If that's an important requirement for your project, you'll probably have to provide the polyfill yourself.

gabrieljablonski commented 8 months ago

https://github.com/msn0/mdn-polyfills/blob/master/src/Element.prototype.getAttributeNames/index.js

if (Element.prototype.getAttributeNames == undefined) {
    Element.prototype.getAttributeNames = function () {
        var attributes = this.attributes;
        var length = attributes.length;
        var result = new Array(length);
        for (var i = 0; i < length; i++) {
            result[i] = attributes[i].name;
        }
        return result;
    };
}