Astro template syntax bug in `Array.map()` function causes incorrect nesting.

[nakorndev]

Astro Info

Astro                    v4.10.3
Node                     v18.20.3
System                   Linux (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             @astrojs/tailwind

If this issue only occurs in one browser, which browser is a problem?

Edge

Describe the Bug

I encountered an unusual issue in the Astro project. When I add an element within the map() function, the nested element appears in the wrong place. I’ve provided a reproduction on StackBlitz along with an image capture. If I uncomment a specific line, the issue becomes evident.

This is image working as expected (Commented).

And this is image nested element appears incorrect place.

What's the expected result?

The nested on <a> should be appears as parent. Not in the bug as the reproduction.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/withastro-astro-epzfba?file=src%2Fpages%2Findex.astro

Participation

• [ ] I am willing to submit a pull request for this issue.

[bluwy]

You cannot nest <a> elements this way per browser HTML behaviour. The browser is "auto-fixing" this so that the to <a> elements are separately clickable, hence the markup is changed. If you inspect the network request and see what Astro responded, it's the same markup as you've written, and then the browser changes it.