getWavesEffectElement throws error with any svg left/right click - Need to do null checking
See original GitHub issueSince 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:
- Created 8 years ago
- Reactions:1
- Comments:29 (19 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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