htmx
htmx copied to clipboard
bigskysoftware
Undocumented Behavior: `hx-boost` will honor any `hx-swap` attribute it found on the DOM tree
Hi, I hope this issue finds you well.
I just want to report a little bit of undocumented behavior as far as I can tell (at the very least, I don't think I found any mention of this specific behavior on htmx.org/docs).
The issue specifically is about the hx-boost behavior on an anchor tag. If on the way to the root/parent of the DOM, you find any hx-swap attribute, it will honor that attribute during swapping.
For example the following code:
<body>
<ul>
<li hx-get="/posts?page=2" hx-swap="afterend" hx-trigger="revealed">
<a hx-boost="true" href="/posts/12">Title</a>
</ul>
</body>
Will not swap the <body>. But instead will append the innerHTML of the response body after the pre-existing body. like this:
<body>
<ul>
<li hx-get="/posts?page=2" hx-swap="afterend" hx-trigger="revealed">
<a hx-boost="true" href="/posts/12">Title</a>
</ul>
</body>
<div id="new-content">
...
</div>
Just like the behavior of afterend.
This behavior can be fixed by specifying hx-swap attribute alongside the hx-boost to the default (innerHTML) or even similar behavior (such as outerHTML) like this:
<a hx-boost="true" hx-swap="innerHTML" href="/posts/12">Title</a>
However there does not seem to be any difference when using either innerHTML or outerHTML.
I won't exactly specify this as a bug, as it makes sense that hx-boost is in a way shared behavior with hx-get. Though it does not seem to be documented anywhere and it took me quite some time to identify this issue.
Hope that it helps. Thanks!!
Hey, looks like it already is documented. But all these options and behaviors can be confusing at first, I understand your point.
See "Notes" in https://htmx.org/attributes/hx-swap/:
hx-swap is inherited and can be placed on a parent element
Hey, looks like it already is documented. But all these options and behaviors can be confusing at first, I understand your point.
See "Notes" in https://htmx.org/attributes/hx-swap/:
hx-swap is inherited and can be placed on a parent element
Hey thanks. well the definition is quite a bit implicit but in a way it is described. Should I close the issue?