question-mark
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.

Links in mj-text components are not selectable by default

See original GitHub issue

I stumbled upon another odd behaviour. When I create a link inside a mj-text component using the built-in RTE I cant directly access the link after the editor loaded.

I need to double click the text, to edit the text, then select the link, select another component in the editor to change the focus and then reselect the link which is now accessible. This can’t be an expected behaviour or is it?

Here is some mjml to reproduce this:

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text>
          This is some text. <a href="https://example.com" title="Test" target="_blank" class="link">This is a link</a>.
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
ditschedevcommented, Nov 6, 2020

Yes, thats the current behavior as described in the issue. But this is not expected. Set yourself in a customer perspective with hardly technical knowledge, who would find this out?

I looked at the code and did not find an explanation for this behavior, if so, I‘d have fixed this myself.

1reaction
m-e-conroycommented, Nov 6, 2020

I found that you need to double click the text container then deselect the text container, afterwards the links are selectable. That’s the only way I found that allows you to select a link.

Read more comments on GitHub >

github_iconTop Results From Across the Web

8.1. Working with Text Components - Open EdX Documentation
field, and then select New Window. If not, you can leave the default value. Select Insert. Save the Text component and test the...
Read more >
Tailwind CSS how to style a href links in React? - Stack Overflow
Now, use that class explicitly when you want it rather than applying it no matter what. <a class="hyperlink" href="/foo/bar">Text link</a> ...
Read more >
Links - Usability & Web Accessibility - Yale University
In general, content editors should avoid using images as links. If an image functions as a link, the image must have alt text...
Read more >
Text in Compose - Jetpack - Android Developers
By default, Text will select the natural text alignment depending on its content value: ... Right aligns to the right side no matter...
Read more >
Styling links - Learn web development | MDN
Default styles · Use underlining for links, but not for other things. If you don't want to underline links, at least highlight them...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found