Pro 6 Beta 2 - Inconsistency where a container is set to an a tag

Beta
#1

Two scenarios with a container set to an “a” tag containing a button.

  1. Column set to an “a” tag
  2. Div set to an “a” tag

Column set to an a tag.
If a column contains a button and both the container and button have a link on then in the front end the column contains the link and the button the link is removed. As such everything works as expected as you can’t nest a tags in HTML.

Div set to an a tag
If a “div” contains a button and both the div and button have a link they appear correctly in the builder. On the front-end the layout is broken as both the div and the button contain a link. As such the code breaks the button out of the div container. In this scenario, unlike a column, the link is not removed from the button.

Obviously we can leave the link off the button which doesn’t break the layout but one would expect a consistent behaviour when buttons are nested inside a container that is set to an a tag.

1 Like
#2

I fully agree with you on that. In particular with the new concept of components and parameters, one might place a button component into a div, where one might not even be able to remove the a-tag because it is abstracted away.

#3

@urchindesign / @striata

What is supposed to happen here is what is happening with the Column example you’ve outlined above. If you place an <a> tag inside an <a> tag, this is invalid HTML and will break your layouts. For years now we’ve had a pattern where if an <a> tag is applied to a parent Element and another <a> tag is accidentally or unknowingly applied to a child, it is stripped from the child and replaced with a generic <div> and the href of the child is removed. This keeps the top-most link functional and layouts working appropriately.

I have confirmed that for some reason this filtering seems to not be working on the Div Element in particular. We will look into this.

1 Like