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)

Most upvoted comments

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 image

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.