OOB swap behaviour

[florian-sun]

If an element is swapped, any nested element which has oob attribute set (hx-swap-oob="true") is not displayed.
Is it normal, a bug or do I miss something?

[Telroshan]

Hey, does the "nested OOB swaps" section of the docs help?

By default, any element with hx-swap-oob= attribute anywhere in the response is processed for oob swap behavior, including when an element is nested within the main response element. This can be problematic when using template fragments where a fragment may be reused as a oob-swap target and also as part of a bigger fragment. When the bigger fragment is the main response the inner fragment will still be processed as an oob swap, removing it from the dom.
This behavior can be changed by setting the config htmx.config.allowNestedOobSwaps to false. If this config option is false, OOB swaps are only processed when the element is adjacent to the main response element, OOB swaps elsewhere will be ignored and oob-swap-related attributes stripped.

Hope this helps! Let us know if the docs do not address your concern or aren't clear enough!

[florian-sun]

Sorry, it doesn't help but I guess my question was not clear. My question is about hx-swap-oob in the browser. That docs is about hx-swap-oob in the response.
So, let me re-phrase my question:
If an element in the existing html in the browser is swapped (regular, no OOB), any nested element which has oob attribute set (hx-swap-oob="true") is no longer displayed after the swap.

Ex:

<div id = "div1">...
  <div id = "div2" hx-swap-oob = "true">...</div>
</div>

When div1 is swapped, div2 is no longer displayed

[Telroshan]

I may be misunderstanding and sorry in advance for that if that's the case!
If you're swapping div1, thus replacing its content, and the new content doesn't contain div2 itself, then yeah it's normal that div2 is gone after the swap. Oob lets you swap elements elsewhere on the page than the initial target, but an existing oob-swapped element on the page is just like any regular element.
In fact, hx-swap-oob is only processed on elements about to be swapped, but once on the page, it doesn't do anything more.

Again, I may be misunderstanding your usecase here, but if what you're trying to achieve is to preserve div2 as a child of div1 even though you swap div1 with a new content that itself doesn't include div2, then what you want is probably hx-preserve in this case.

Hope this helps!

[florian-sun]

The new content DOES contain div2, that's the problem.

[PaulMansour]

Try removing hx-swap-oob = "true" on div2 in the response. This is telling htmx to pull out the element to do an out-of-band swap. Since there is probably no corresponding id in the element on the page and in the response, htmx has no place to put it and simply tosses it.

[florian-sun]

But I need it to be OOB because sometimes I do OOB swaps and sometimes regular swaps. Also, there is always a corresponding ID, both the old and new div2 have same ID , they are actually identical.

[PaulMansour]

Sorry, I think I miss understood your actual question, and agree with Telroshan that the behavior is indeed normal and expected.

[Telroshan]

Ok so let me try again, hoping I correctly understand your situation this time.
OOB swapping is processed before normal swap.
So, if your initial situation is like this

<div id = "div1">...
  <div id = "div2" >...</div>
</div>

And you swap div1 with this new content

<div id = "div1">...
  <div id = "div2" hx-swap-oob = "true">...</div>
</div>

Then what happens is that:

• div2 will be swapped out of bands over the existing div2 element, and removed from the response fragment (that isn't swapped yet)
• then div1 is replaced by the new div1 contained in the response (that doesn't include a div2 anymore as it was swapped out of bands)
• As div2 was already moved into the DOM, and its new parent gets replaced by the new div1, it's now gone

In this case, Paul is right ; you should simply not define hx-swap-oob on div2, and instead do a regular swap.
Is there any reason you cannot specify hx-swap-oob when you actually need it, and avoid specifying it in cases where you don't (such as this one)?

[florian-sun]

No, my initial situation is this:

<div id = "div1">...
  <div id = "div2" hx-swap-oob = "true">...</div>
</div>

My new content is the same:

<div id = "div1">...
  <div id = "div2" hx-swap-oob = "true">...</div>
</div>

And I know how to go around specifying hx-swap-oob when I need it.

But my question was if this behavior (div2 not displayed) is normal.

Also, when the initial situation is as you said (no OOB)

<div id = "div1">...
  <div id = "div2" >...</div>
</div>

this doesn't happen, everything is OK.

[Telroshan]

Yeah, once in the DOM, the hx-swap-oob attribute doesn't do anything (it's only used when swapping in new content, to apply the OOB strategy), so it works the same, and the behavior you're observing is normal I'd say!