htmx icon indicating copy to clipboard operation
htmx copied to clipboard

Class 'htmx-settling' not being added to DOM when response includes OOB items

Open lmd-code opened this issue 4 years ago • 0 comments

After looking at the docs, I could not find whether this is expected behaviour or not.

The following is a simplified test I conducted when I noticed the issue.

The initial HTML:

<div id="test" hx-target="#innertest" hx-swap="innerHTML swap:1s settle:1s">
    <div id="innertest"><p>The content to swap.</p></div>
    <div><a href="#" hx-get="./?t=2">Trigger Swap</a></div>
</div>

<div id="oobtest"><p>The OOB content to swap.</p></div>

The response from the server:

<p>The swapped content.</p>
<div id="oobtest" hx-swap-oob="true"><p>The swapped OOB content.</p></div>

After triggering, the htmx-swapping class is added to the '#innertest' DIV as expected, but the htmx-settling class is not added.

When I remove the OOB content from the response, both the htmx-swapping and htmx-settling classes are added correctly.

Is this a bug, or expected behaviour?

I am using swapping/settling to fade out and then in the swapped content.

I want to be clear, it is the class not be added to the DOM, not the CSS not working.

lmd-code avatar Nov 18 '21 12:11 lmd-code