mat-chip with with anchor link in parent causes page reload

[lucasvanhalst]

What is the expected behavior?

The page should be navigated to without causing a reload

What is the current behavior?

The entire page is reloaded.

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

https://stackblitz.com/edit/angular-material2-issue-dvn5ws?file=app%2Ftest.component.html

Clicking the first chip causes the page to reload (but you still end up on the correct page)
Clicking the second chip works as it should

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

7.2.11

Is there anything else we should know?

Looks like there was a related issue in the past: #9032

[musakasim]

according to this pr I understand that this is the intended behaviour. To prevent refresh we should disable the chip. This cause the opacity change. At this point nothing one can do but reset css opacity.

<a routerLink="other">
  <mat-chip-list>
    <mat-chip style="opacity:1"  disabled>chip with link in parent</mat-chip>
  </mat-chip-list>
</a>

At least for now I use this method.

What do you think?

[josephperrott]

Closing as this is actually unrelated to the mat-chip, but rather that a click is occuring inside of an <a> tag.

I created a fork of your reproduction showing that this occurs even with a native <button> element inside of an <a> tag.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}