Bugfix: swap="outerHTML" on <div> with style attribute leaves htmx-swapping class behind (#3341)

* Added regression test for swap=outerHTML unexpected behavior, checked it failes, implemented initial fix in htmx.js that makes (all) test(s) run and pass.

* Renamed variable in my regression test to be more clear.

* I noticed I wasn't using the copies of the attributes I introduced.Tests were passing and I know why, though. This means I miss one more regression test for the bug in cloneAttributes.

* Added one more regression test for the fix in cloneAttributes.

* Made preservation of htmx- prefixed classes more robust in cloneAttributes after I noted they could as well be removed by mergeTo.setAttribute in the second forEach loop.

* Started as a typo-fix, ended up renaming regression tests to be more explicit.

* Started as a typo-fix, ended up renaming regression tests to be more explicit.

* Removed space that I accidentally added before.

* Applied changes as requested by MichaelWest22.

---------

Co-authored-by: Matteo Smaila <matteo.smaila@314softwaresolutions.com>
Co-authored-by: 1cg <469183+1cg@users.noreply.github.com>

Author: 3 people

src/htmx.js

@@ -1413,7 +1413,7 @@ var htmx = (function() {
    * @param {Element} mergeFrom
    */
   function cloneAttributes(mergeTo, mergeFrom) {
-    forEach(mergeTo.attributes, function(attr) {
+    forEach(Array.from(mergeTo.attributes), function(attr) {
       if (!mergeFrom.hasAttribute(attr.name) && shouldSettleAttribute(attr.name)) {
         mergeTo.removeAttribute(attr.name)
       }

test/core/regressions.js

@@ -292,6 +292,35 @@ describe('Core htmx Regression Tests', function() {
     byId('datefield').click()
   })
 
+  it('swap=outerHTML clears htmx-swapping class when old node has a style attribute and no class', function(done) {
+    this.server.respondWith('GET', '/test', '<div id="test-div">Test</div>')
+
+    var btn = make('<button hx-get="/test" hx-target="#test-div" hx-swap="outerHTML">Click Me!</button>')
+    var div = make('<div id="test-div" style></div>')
+    btn.click()
+
+    this.server.respond()
+
+    var div = byId('test-div')
+    const isSwappingClassStillThere = div.classList.contains('htmx-swapping')
+    isSwappingClassStillThere.should.equal(false)
+    done()
+  })
+
+  it('swap=outerHTML won\'t carry over user-defined classes when old node has a style attribute before the class attribute', function(done) {
+    this.server.respondWith('GET', '/test', '<div id="test-div">Test</div>')
+
+    var btn = make('<button hx-get="/test" hx-target="#test-div" hx-swap="outerHTML">Click Me!</button>')
+    var div = make('<div id="test-div" style class="my-class"></div>')
+    btn.click()
+
+    this.server.respond()
+
+    var div = byId('test-div')
+    div.classList.length.should.equal(0)
+    done()
+  })
+  
   it('a button clicked inside an htmx enabled link will prevent the link from navigating on click', function(done) {
     var defaultPrevented = 'unset'
     var link = make('<a href="/foo" hx-get="/foo"><button>test</button></a>')
@@ -333,4 +362,5 @@ describe('Core htmx Regression Tests', function() {
 
     button.click()
   })
+
 })