Merge branch 'dev' into button-fix

Author: 1cg

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)
       }
@@ -5062,12 +5062,14 @@ var htmx = (function() {
   function insertIndicatorStyles() {
     if (htmx.config.includeIndicatorStyles !== false) {
       const nonceAttribute = htmx.config.inlineStyleNonce ? ` nonce="${htmx.config.inlineStyleNonce}"` : ''
+      const indicator = htmx.config.indicatorClass
+      const request = htmx.config.requestClass
       getDocument().head.insertAdjacentHTML('beforeend',
-        '<style' + nonceAttribute + '>\
-      .' + htmx.config.indicatorClass + '{opacity:0}\
-      .' + htmx.config.requestClass + ' .' + htmx.config.indicatorClass + '{opacity:1; transition: opacity 200ms ease-in;}\
-      .' + htmx.config.requestClass + '.' + htmx.config.indicatorClass + '{opacity:1; transition: opacity 200ms ease-in;}\
-      </style>')
+        `<style${nonceAttribute}>` +
+        `.${indicator}{opacity:0;visibility: hidden} ` +
+        `.${request} .${indicator}, .${request}.${indicator}{opacity:1;visibility: visible;transition: opacity 200ms ease-in}` +
+        '</style>'
+      )
     }
   }
 

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>')
@@ -355,4 +384,5 @@ describe('Core htmx Regression Tests', function() {
 
     span.click()
   })
+
 })

www/content/attributes/hx-indicator.md

@@ -43,17 +43,18 @@ image.  The image also has the `htmx-indicator` class on it, which defines an op
 that will show the spinner:
 
 ```css
-    .htmx-indicator{
-        opacity:0;
-        transition: opacity 500ms ease-in;
+    .htmx-indicator {
+        opacity: 0;
+        visibility: hidden;
     }
-    .htmx-request .htmx-indicator{
-        opacity:1;
-    }
-    .htmx-request.htmx-indicator{
-        opacity:1;
+    .htmx-request .htmx-indicator,
+    .htmx-request.htmx-indicator {
+        opacity: 1;
+        visibility: visible;
+        transition: opacity 200ms ease-in;
     }
 ```
+This default `htmx-indicator` CSS also sets the visibility to hidden for better screen reader accessibility and does a quick fade in of the opacity.
 
 If you would prefer a different effect for showing the spinner you could define and use your own indicator
 CSS.  Here is an example that uses `display` rather than opacity (Note that we use `my-indicator` instead of `htmx-indicator`):
@@ -62,9 +63,7 @@ CSS.  Here is an example that uses `display` rather than opacity (Note that we u
     .my-indicator{
         display:none;
     }
-    .htmx-request .my-indicator{
-        display:inline;
-    }
+    .htmx-request .my-indicator,
     .htmx-request.my-indicator{
         display:inline;
     }
@@ -102,3 +101,8 @@ This simulates what a spinner might look like in that situation:
 ```html
 <meta name="htmx-config" content='{"includeIndicatorStyles": false}'>
 ```
+* the `htmx-indicator` CSS added when this config is not disabled uses an inline style tag which may need you to set `inlineStyleNonce` config if you have a strict nonce based CSP policy for `style-src`
+```html
+<meta name="htmx-config" content='{"inlineStyleNonce": "random-nonce"}'>
+```
+* If your CSP needs to block all inline style tags then disable `includeIndicatorStyles` and host your own CSS file with a copy of your preferred `htmx-indicator` style from above