v1.0.0-beta : ScrollSpy not working properly when clicking on an <i>-element.

Expected Behavior

Click on Button scrolls Section below into view.

Current Behavior

I have a button [a.btn-large] witch should scoll to a section below in the document.

<a href="#contact" class="waves-effect waves-light btn-large"><i class="material-icons left">message</i>[link-text]</a>
[snip]
<section id="contact" class="contact fixed-bg scrollspy">[content]</section>

if i click on the icon instead of the link-text it just jumps, without scrolling, to the ancor.

Possible Solution

Line#6150 in Materialize,js: You’re comparing the $trigger to 'a[href="#' + scrollspy.$el.attr('id') + '"]' to start scrolling.

But if the $trigger is an <i> inside the <a> nothing happens.

Your Environment

Chrome 65.0.3325.181 JQuery 3.1.1 Materialize 1.0.0-beta

[Spikeworld]

Experienced the same issue today. For a quick workaround I added style="pointer-events:none;" to <i>

[sanisoclem]

same thing happens when the link has an svg. I did some digging and it seems like its because of this:

https://github.com/Dogfalo/materialize/blob/e5f686b87bd95eeec2b9c7cac8e0eb7241f0ccaf/js/scrollspy.js#L108

normally $target would be the anchor but for some reason, it is set to the svg or i element (could be others). The following css fixes the issue for me:

a > svg,
a > i {
  pointer-events: none;
}

also found this great article that demonstrates this problem: https://css-tricks.com/links-inline-svg-staying-target-events/