Replace <a> with <a> breaks the link

[hogoww]

Hello,

I'm trying to change links that come from a random source to local links.
For context, I am trying to avoid reloads when I click on a local link, and redirect it to /app/whatever/url

Basic V1:

<Markdown> {markdown} </Markdown>

This works, but as the link comes from users inputs (basically), it triggers a full reload even if everything is loaded.

V2:

<Markdown
          components={{
              a: props => { return <a href={props.href}>{props.children}</a> }
          }}>{markdown}</Markdown>

This renders something that looks like a link, but does not navigate.
On top of V2, I tried the following which all gave similar results:

• Adding an onClick on the which never triggers;
• Adding remark-gfm;
• Using the syntax a(props){...};
• Using react-router-dom Links;
• Hacked the framework to check that my url was not sanitize
  Searching the internet gave me multiple solution, but I feel like I'm missing something about how things work under the hood.
  And I'm running out of ideas :D

Does anyone have an idea of what I'm missing please ? =)

[ChristianMurphy]

Welcome @hogoww! 👋
Some questions to help better help you.

I am trying to avoid reloads

One of the main advantages of React is that it manages when you reload, and generally you shouldn't need to worry about a reload it will be fast (exceptions of course for infinite reloads, compute heavy workloads, and blocking processes).
I don't hear any of those exceptions in your message, so my initial answer would be stop worrying and let React do it's thing 🙂

I click on a local link, and redirect it to /app/whatever/url

What do you consider a "local link". Do you mean an absolute path on the same domain? A path relative to the current path? An anchor within the current page? Or something else entirely based off of one of React/Next's many routing systems?

This works, but as the link comes from users inputs (basically), it triggers a full reload even if everything is loaded.

I'm not sure I understand your comment.
If you go to another page, it needs to reload, that's how links work.
Are you using something more custom that overrides how URLs are handled? Like a SPA style router and offline app caching? If so have you considered that it could be a bug in how you have that router configured?

Searching the internet gave me multiple solution, but I feel like I'm missing something about how things work under the hood.
And I'm running out of ideas :D

Reoccuring theme here, solutions to what?
You are a bit unclear on what your actual problem is or what you've actually tried with the libraries you list.
Some helpful reading:

• https://xyproblem.info/
• https://stackoverflow.com/help/minimal-reproducible-example

---

The community is happy to help.
Help us help you, by taking some time to articulate what you are trying to solve a bit more clearly. 🙂

[ChristianMurphy]

implicit click event that is given to <a> tag.

What do you mean by an implicit click?
Plain browser DOM and React don't add listeners unless explicitly asked to.
Do you have jQuery or another DOM listening library added?

What is it that you want this click to do, or not do?

Also I thought you were leveraging react-router? Which manipulates the URL rather than doing a stateful click handler.

[hogoww]

I did something similar to your poc, by just doing both version side to side.
First one (aka V1) reacts to a click on the link, and updates the page.
Second one (aka V2) doesn't react to the click on the link, and does not update the page.
The generated HTML look exactly alike to me (which makes sense).
The CSS look exactly alike aswell.
I have no clue why I have this problem locally.
Do you think it could be a CSS issue?
If so, I'll try to update the CSS till it works.

[hogoww]

implicit click event that is given to <a> tag.

What do you mean by an implicit click? Plain browser DOM and React don't add listeners unless explicitly asked to. Do you have jQuery or another DOM listening library added?

What is it that you want this click to do, or not do?

Also I thought you were leveraging react-router? Which manipulates the URL rather than doing a stateful click handler.

It's not important, and we should probably drop that part of the conversation, since I cannot explain properly :/
I'm trying to talk about the basic HTML runtime behavior for a <a> tag
I don't think that's very relevant ^^"

[ChristianMurphy]

Do you think it could be a CSS issue?
If so, I'll try to update the CSS till it works.

This does not sound like a CSS issue.
CSS changes appearance, but not behavior.

First one (aka V1) reacts to a click on the link, and updates the page.
Second one (aka V2) doesn't react to the click on the link, and does not update the page.

My gut sense is something is messed up either with:

1. A third-party library on the page, either analytics (like Google Analytics or Matomo) or a really old UI library that takes over all elements was added (like some kind of jQuery plugin).
2. Something is configured in your build tool that treats links different
3. You have a bug in your router that breaks URLs randomly and it has happens to show up mostly when you click the second link

For something more specific, please please please, create a minimal reproducible example that shows the issue you are seeing. https://stackoverflow.com/help/minimal-reproducible-example
In a sandbox like https://codesandbox.io/p/sandbox/github/remarkjs/.github/tree/main/sandbox-templates/react-markdown-with-vite or https://codesandbox.io/p/sandbox/github/remarkjs/.github/tree/main/sandbox-templates/react-markdown-with-vite
That people can see, and click through, and debug.

[hogoww]

Do you think it could be a CSS issue?
If so, I'll try to update the CSS till it works.

This does not sound like a CSS issue. CSS changes appearance, but not behavior.

Thanks for the sanity check !

First one (aka V1) reacts to a click on the link, and updates the page.
Second one (aka V2) doesn't react to the click on the link, and does not update the page.

My gut sense is something is messed up either with:

1. A third-party library on the page, either analytics (like Google Analytics or Matomo) or a really old UI library that takes over all elements was added (like some kind of jQuery plugin).
2. Something is configured in your build tool that treats links different
3. You have a bug in your router that breaks URLs randomly and it has happens to show up mostly when you click the second link

For something more specific, please please please, create a minimal reproducible example that shows the issue you are seeing. https://stackoverflow.com/help/minimal-reproducible-example In a sandbox like https://codesandbox.io/p/sandbox/github/remarkjs/.github/tree/main/sandbox-templates/react-markdown-with-vite or https://codesandbox.io/p/sandbox/github/remarkjs/.github/tree/main/sandbox-templates/react-markdown-with-vite That people can see, and click through, and debug.

I'm trying this atm !
The only differrence so far, is that you backquote your links.

[hogoww]

Small update, I was able to make it work locally, outside of a canvas.
Seems to be canvas related.
So I guess this conversation could be close !
I'll update still if/when I find the weird interaction.
Thanks a lot for your help @ChristianMurphy !

[hogoww]

Hello,
After way too much debug, I was able to recreate a small reproducible case: https://stackblitz.com/edit/github-kt2wuv-mswjdj?file=src%2Fapp.jsx
It might be reducible a little more though!
I find it quite convulated.
Is that expected behavior?
To me, it looks like a bug, I'm just not sure of which framework tbh :D
I feel like it should be reported somewhere, but where...

[hogoww]

This started as a question as of why I had a bug.This bug is now reproducible with the link from the previous post

Very basically, I want the following:
When I click on a <a href="...">, I want it to open a new page (which is literally the default behavior of the <a> AFAIK)
As you can see in the POC, it does work without override.
It does not work when you override.

Now, I know how to fix.
However, I think this is a bug in a framework.
I do not know whether the bugged framework is react, react-markdown, or even something else.
I'd like to report that bug, as it took a lot of work to find the exact root cause.

[ChristianMurphy]

I want it to open a new page (which is literally the default behavior of the AFAIK)

It is not, same page is the default https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target

[hogoww]

Fair enough.
Still, in the POC, the anchor does not receive any event, so you cannot click on it.

[ChristianMurphy]

Still, in the link, the anchor does not receive any event, so you cannot click on it.

There's a lot going wrong here, and there is no framework bug, but there is a good learning opportunity.

---

The main issue you are running into is order of operations (mousedown before click) and stable identifiers.

Your event handler updates state, which will re-render the component

  const [contextMenu, setContextMenu] = useState({});

  const func = () => {
    setContextMenu({});
  };

In the second example you define the a function has an anonymous inline function

   <Markdown
        components={{
          a: (props) => { // <= this is anonymous inline
            return <a href={props.href}>{props.children}</a>;
          },
        }}
      >

which means the a/link component will be re-defined every time the page reloads.

Because mousedown happens before click https://developer.mozilla.org/en-US/docs/Web/API/Element/mousedown_event

document.addEventListener('mousedown', func);

The link you are trying to click on disappears before you can actually click it.
That's why you see a little render flash on the second example.

to fix this, define components outside your component.

const components = {
  a: (props) => {
    return <a href={props.href}>{props.children}</a>;
  },
};

then reference it in your render function

<Markdown components={components}>{markdown}</Markdown>

this gives a stable reference for the a component which react doesn't need to replace.

working example: https://stackblitz.com/edit/github-kt2wuv-zfjlkb?file=src%2Fapp.jsx

---

In addition you have several other bugs, including not cleaning up your event listeners on re-render and not having the function inside the effect.
If you choose to keep a document wide listener it should look like:

  useEffect(() => {
    const eventHandler = () => {
      setContextMenu({});
    };
    document.addEventListener('mousedown', eventHandler);
    return () => {
      document.removeEventListener('mousedown', eventHandler) // cleanup listener
    };
  }, [setContextMenu]); // watch for changes to state function

see:

• https://blog.logrocket.com/understanding-react-useeffect-cleanup-function/
• https://react.dev/reference/react/useEffect#removing-unnecessary-function-dependencies

---

That said you probably don't want to add a listener to the whole page.
That goes against react convention, scope it to your component instead and you can avoid needing the effect in the first place

function App() {
  const [contextMenu, setContextMenu] = useState({});

  const eventHandler = () => {
    setContextMenu({});
  };

  return (
    <div onMouseDown={eventHandler}> // attach listener within component
    // ...

[ChristianMurphy]

Taking an even further step back.
Probably don't add an event listener at all. 🙂
You are managing state through your router.
Have the router update the content menu.

[hogoww]

Still, in the link, the anchor does not receive any event, so you cannot click on it.

There's a lot going wrong here, and there is no framework bug, but there is a good learning opportunity.
[...]

Oh, so this is expected behavior !
Just a very convoluted interaction.
Cool, I learned a lot here, thank you !

In addition you have several other bugs, including not cleaning up your event listeners on re-render and not having the function inside the effect. If you choose to keep a document wide listener it should look like:

To be honest, I was just exhausted by the debug session, and just wanted to share my understanding there.
Theses are only in the example, and not in my code base :)

Thanks a bunch for everything @ChristianMurphy that was super interesting !