fix scroll behaviour when clicking on anchors

[fazouane-marouane]

Hi,

We're having issues with internal links generated from markdown documents. Links to the same documents (normal html anchors) did not work as expected: when clicking on the links, no scrolling was done.

This was mainly due to a "event.preventDefault()". That's what this PR is all about.

[MoOx]

Sorry for the delay!

Shouldn't we check that it's the same page? What happen if a click on a link with an anchor to another page?

[MoOx]

@fazouane-marouane up :)

[fazouane-marouane]

Hi

I can try checking against the current location first. But the scroll probably won’t happen in the target page.
Sorry I’ve got nothing better to propose.
If linking to outside pages with anchors is something that’s done usually, then maybe we need a more advanced Link component.
What are your thoughts on this?

[fazouane-marouane]

@MoOx The proposed fix should be Okay now. I changed the Link component and I based it on react-router-hash-link.
Please, tell me what changes should I make to the PR mergeable.

[MoOx]

I think we should try to keep previous component and adjust like you started to. RR4 (via rr4dom) is not an option imo.
What was the problem if your initial change except that it didn't support hash on other urls? Seems not that hard to adjust, but I may miss something

[MoOx]

This is not an option for us. We can't use RR v4, see #1130

[fazouane-marouane]

Well, finally someone came up with a solution not on phenomic side. you can find it here parisjs/parisjs-website@a044ffb

It consists of having a hashLinkScroll function:

function hashLinkScroll() {
   const { hash } = window.location
 
   if (hash !== '') {
     setTimeout(() => {
       const id = hash.replace('#', '')
       const element = document.getElementById(id)
       if (element) element.scrollIntoView()
     }, 0)
   }
 }

Then, you'd use it like so <Router ... onUpdate={ hashLinkScroll } > ...</Router>.
So maybe, we just need to document this or find a way to automatically inject the hashLinkScroll in phenomic once and for all. What are your thoughts on this?

[MoOx]

I guess documentation about his could be great. I will start to document the project in the coming weeks and will include this when I will add support for this. Thanks for digging into this problem!