a tags redirecting to the same page if they have the same event name, even if they have different href values

[reddiedev]

I am making my portfolio website using AstroJS with Typescript and TailwindCSS. I was making some "Read More ..." tags for navigation and I noticed an odd interaction with umami click events.

*the rel="prefetch" is related to the @astrojs/prefetch integration

Problem

Whenever I had different a tags (even with different hrefs) that I had in the same page, they would redirect to the first tag. (Clicking the first one redirects to /blog just fine, but clicking on the second one redirects into /blog instead of /works). I think what is happening is that the event listener for the first instance of the a tag is overwriting the href redirects of the succeeding a tags.

 <a class="... umami--click--read-more" href="/blog" rel="prefetch" aria-label="blog"> ... </a>

 <a class="... umami--click--read-more" href="/works" rel="prefetch" aria-label="works"> ... </a>

Solution

I was able to avoid this problem by using unique event names for each of the a tags.

 <a class="... umami--click--read-more-blog" href="/blog" rel="prefetch" aria-label="blog"> ... </a>

 <a class="... umami--click--read-more-work" href="/works" rel="prefetch" aria-label="works"> ... </a>

I'm not sure if the initial problem was an error in my part or a bug with Umami. My use-case doesn't necessarily need to have the same event names for the a tags, but any help or clarification regarding this matter is appreciated. Thanks!

[mikecao]

Fixed in v2.0.0.