When setting a query loop inside of a component, if the query loop element has specific tags it breaks the DOM structure in the builder.
An example I came across is a table, with div/blocks using tags such as tbody > tr > td
A common use case would be to loop the tr elements inside of a table, to create table rows dynamically. but if inside of a component, the structure breaks leaving the looped content either outside of the first tr element or not rendering at all within the builder.
Screen recording showing issue…
Notice from the video that…
- When the table is placed inside of a component, the structure breaks in the builder. The element that should repeat (the brxe-kohnbc element with the tr tag) is only output once. Any content within the loop is thrown outside of it.
- When i change the custom tags to ‘span’, the issue goes away and all the content is correctly inside of the loop - (the brxe-kohnbc element from the video) obviously the layout changes due to using spans, but it’s the structure in the DOM I’m referring to.
This may also happen for other custom tags, but I only tested these table ones (tr + td)
Steps to reproduce…
- Create a basic HTML table using div or blocks elements with the tags changed to tbody/tr/td etc.
- Set a query loop on the tbody > tr element, so it creates a few rows for the table.
- Place the table inside of a component and refresh the builder to see the issue.
If you add more content inside of the table cells (like in my video above, I had text elements inside of each cell, then this content will be rendered outside of the loop, breaking the table.