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.

Link elements do not follow anchors when these are accentuated

See original GitHub issue

If in a mdx file I have something like

# This is my áccentuated title

and later I grab the tableOfContents through graphQL, I can see that tableOfContents.items[].node.url and the id property passed to the h1 node has the accent

id="This-is-my-áccentuated-title"

The link you can recreate with "to="mywebpage#This-is-my-áccentuated-title" doesn’t go to the anchor because of the accent (at least what I’m seeing in Chrome)

One easy workaround would be to just remove accents when creating the id names, but AFAIK it cannot be done by the user (?)

Issue Analytics

State:
Created 3 years ago
Comments:6 (3 by maintainers)

Top GitHub Comments

2reactions

blainekastencommented, Jun 19, 2020

Fixed in latest!

1reaction

blainekastencommented, May 8, 2020

@kuworking Thanks for reporting. I spent some time yesterday looking into this and have absolutely reproduced it.

To document my findings here is a few things:

In a native HTML page

Clicking an accented id scrolled to the matching id
Reloading restored previous pages scroll position (meaning it did not care about the #id match)

In Gatsby

Clicking an accented id within a page scrolls to it properly
Navigating to a new page with the accented id does not scroll to it, we jump to the top of the page

I haven’t identified yet if this is a Gatsby problem, or with @reach/router, but there is definitely an inconsistency here and we’d like to align with the platform.