materialize: getWavesEffectElement throws error with any svg left/right click - Need to do null checking
Since you wire up a click event in the body document.body.addEventListener(‘mousedown’, showEffect, false);
you need to add some additional null checks to the getWavesEffectElement function. Otherwise using libraries like google charts will cause errors to be thrown because you all use the same css class names and they have structured their elements different than you structured yours.
Please see comments below to see where null checks need to be added
getWavesEffectElement(e) {
if (TouchHandler.allowEvent(e) === false) {
return null;
}
var element = null;
var target = e.target || e.srcElement;
//added target
while (target && target.parentElement !== null) {
//added target.className
if (target.className && !(target instanceof SVGElement) && target.className.indexOf('waves-effect') !== -1) {
element = target;
break;
}
//added target.classList
else if (target.classList && target.classList.contains('waves-effect')) {
element = target;
break;
}
target = target.parentElement;
}
return element;
}
About this issue
- Original URL
- State: closed
- Created 9 years ago
- Reactions: 1
- Comments: 29 (19 by maintainers)
Line 2124 of materialize js, this seems to stop the error, and wouldn’t have any affect on SVGs otherwise
} else if ((target.className).toString().indexOf('waves-effect') !== -1) {
@DanielRuf I tried just copying and pasting latest waves code into the materialize code (https://github.com/jacobq/materialize/tree/update-waves) but that seemed to break functionality (guessing either the API changed or the waves code in materialize is modified (hope not; that sounds like a maintenance headache)), so instead I changed one line to circumvent the problem I’m having. This shouldn’t have any negative effect, so if you think it might be a while before the underlying code gets an update I’d appreciate some kind of stop-gap like this. See https://github.com/jacobq/materialize/tree/svg-click-fix-hack
I think we should diff our waves.js 0.6.4 file against the original one, rebase it, apply the newest release of it, test it and release it with the next Materialize version.