#Weird bug when render Astro component inside <a> element

39 messages Ā· Page 1 of 1 (latest)

warped fjord
#

Codesandbox: https://codesandbox.io/p/devbox/4vhgj5
Reproduction:

  1. Create a sample Card Astro component:
// src/components/Card.astro
---
const { title } = Astro.props;
---
<h1>
  {title}
  <a href={`#`}> Card link </a>
</h1>
  1. Render Card Astro component in a <a> element:
// src/pages/index.astro
---
import Card from "../components/Card.astro";
---
<main>
  <a href="#">
    <button>Do something</button>
    <Card
      href="https://docs.astro.build/"
      title="Documentation"
      body="Learn how Astro works and explore the official API docs."
    />
  </a>
</main>
  1. Bug:
  • Card component is rendered outside <a> (1) element.
  • Inside Card component has a weird <a> (2) element has astro-source-loc points to the parent <a> (1) element. The <a> (2) element picks up any props passed to the Card component.

Images are attached below.

  • Image 1: Show overview of the reproduction project (What are rendered on the screen).
  • Image 2: Element tree illustrate the bug mentioned above.
    Thanks for following this bug.
Screenshot_from_2024-09-12_22-53-50.png Screenshot_from_2024-09-12_23-03-02.png
grizzled pivot
#

I dont know if thats relevant but. You pass in the href to the card but you dont use it you rather just hardcode #

#

Astro does some things to anchor tags so you can use stuff like prefetch

warped fjord
#

Ah sorry about that, it was the props from the original Card in the npm create astro@latest.

grizzled pivot
#

But might as well be a parsing bug. I mean. Yo dawg we heard you like links so we put a link in your link šŸ˜„

warped fjord
#

But the weird thing is as you can see, the h1 element from Card component isn't not rendered inside the parent a element. And inside the Card component rendered a redundant a element, even though I didn't passed any children to the Card component šŸ¤”

#

I tried to create a React component and it worked well though šŸ¤·

grizzled pivot
#

Hes rendering the outer twice

#

thats weird

warped fjord
#

Yeah and it pointed to the #outer element

civic saffron
#

Nested anchor tags are not usable

#

You have an anchor tag inside your card which is also inside an anchor tag

grizzled pivot
#

HTML 5 standards do not allow nesting of hyperlinks

civic saffron
#

Like I said šŸ˜›

grizzled pivot
#

There is something similar with the <p> tag html is magical

warped fjord
#

Oh dawg, thank you so much guys. I knew it's kinda anti pattern to do so, but I thought it was a bug worth reporting to you guys.

civic saffron
#

I mean it makes sense

#

if you click on a link nested inside another link, how is the browser supposed to know which one to route you to?

grizzled pivot
#

Stop event propagation ?

civic saffron
#

So then the nested link is pointless because only the top level link will ever get "clicked"

warped fjord
#

My use case it a link card, inside it has a heading with a button can link to that heading itself, so it will create nested anchor tags

grizzled pivot
#

Arent you technically clicking the element and then the boubling takes care of that?

civic saffron
civic saffron
warped fjord
#

I tried to render a React component, which the heading link button has z-index about 50, which can actually clicked, a little hacky šŸ¤“ . I think I have to change the layout then.

civic saffron
#

What does the card link to?

warped fjord
#

The card link to a new page. The card was to add some info to the link :v

civic saffron
#

Honestly sounds like a confusing pattern

#

I would just decide which of those two you want as your primary action

#

and then put a primary and secondary CTA on the card

#

"Go to heading" & "View page" or whatever

#

that's a much more familiar and user friendly pattern

#

(and less hassle for you :P)

warped fjord
#

Yeah I think it will do the job.

#

Thanks again for your helps šŸ¤Ÿ