question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

getWavesEffectElement throws error with any svg left/right click - Need to do null checking

See original GitHub issue

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;
    }

Issue Analytics

  • State:closed
  • Created 8 years ago
  • Reactions:1
  • Comments:29 (19 by maintainers)

github_iconTop GitHub Comments

1reaction
shanehobancommented, Jun 27, 2017

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) {

1reaction
jacobqcommented, Jun 26, 2017

@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

Read more comments on GitHub >

github_iconTop Results From Across the Web

getElementById is returning null when trying to access an SVG ...
When you create your svg-element you already have a reference to it in the variable you assigned. No need to get it again...
Read more >
Click on an svg element doesn't trigger a click event. #4495
click () throws an "element not visible" error. Using browser.actions().click(element.all(by.css('svg')).get(0).getWebElement()).perform ...
Read more >
getElementById returns null when called on svg element
SVG itself is a document and any child elements added to it should return on svg.getElementById. I will revert the fix made in...
Read more >
circles from size 0 to fully cover the screen - GreenSock
I have a huge performance issue with getting plain circles to grow from zero to fully cover the page. (I am not expecting...
Read more >
Data Viz Journal Index / Di - Observable
This is an index for Journal: Getting Started with Data Viz. This helps me find notebooks where I learned specific topics, techniques, or...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found