handle removing request lock on errors (#3284)

* handle removing request lock on errors

* Fixed non function verifyUrl tests and added tests for the double requests this PR fixes

Author: MichaelWest22

src/htmx.js

@@ -4446,6 +4446,7 @@ var htmx = (function() {
     if (!verifyPath(elt, finalPath, requestConfig)) {
       triggerErrorEvent(elt, 'htmx:invalidPath', requestConfig)
       maybeCall(reject)
+      endRequestLock()
       return promise
     }
 
@@ -4508,10 +4509,11 @@ var htmx = (function() {
           }
         }
         maybeCall(resolve)
-        endRequestLock()
       } catch (e) {
         triggerErrorEvent(elt, 'htmx:onLoadError', mergeObjects({ error: e }, responseInfo))
         throw e
+      } finally {
+        endRequestLock()
       }
     }
     xhr.onerror = function() {

test/core/api.js

@@ -602,7 +602,7 @@ describe('Core htmx API test', function() {
     htmx.off('htmx:beforeSwap', handler)
   })
 
-  it('ajax api with can pass in custom handler', function() {
+  it('ajax api with can pass in custom handler and handle if it throws error', function() {
     var onLoadError = false
     var handler = htmx.on('htmx:onLoadError', function(event) {
       onLoadError = true
@@ -617,6 +617,15 @@ describe('Core htmx API test', function() {
     } catch (e) {}
     div.innerHTML.should.equal('')
     onLoadError.should.equal(true)
+
+    // repeat the error resonse a 2nd time to make sure request lock removed after error
+    onLoadError = false
+    try {
+      htmx.ajax('GET', '/test', { handler: function() { throw new Error('throw') } })
+      this.server.respond()
+    } catch (e) {}
+    div.innerHTML.should.equal('')
+    onLoadError.should.equal(true)
     htmx.off('htmx:onLoadError', handler)
   })
 })

test/core/headers.js

@@ -367,8 +367,7 @@ describe('Core htmx AJAX headers', function() {
     htmx.off('bar', handlerBar)
   })
 
-  it.skip('should change body content on HX-Location', function(done) {
-    // this test is disabled because a bug is triggered by an earlier request where it does not remove endRequestLock() on errors blocking all future requests
+  it('should change body content on HX-Location', function(done) {
     this.server.respondWith('GET', '/test', [200, { 'HX-Location': '{"path":"/test2", "target":"#work-area"}' }, ''])
     this.server.respondWith('GET', '/test2', [200, {}, '<div>Yay! Welcome</div>'])
     var div = make('<div id="testdiv" hx-trigger="click" hx-get="/test"></div>')

test/core/security.js

@@ -144,11 +144,17 @@ describe('security options', function() {
 
   it('can make a real local data uri request when selfRequestOnly false', function(done) {
     htmx.config.selfRequestsOnly = false
+    var pathVerifier = htmx.on('htmx:validateUrl', function(evt) {
+      if (evt.detail.sameHost === false && evt.detail.url.protocol !== 'data:') {
+        evt.preventDefault()
+      }
+    })
     this.server.restore() // use real xhrs
     var btn = make('<button hx-get="data:,foo">Initial</button>')
     btn.click()
     htmx.config.selfRequestsOnly = true
     setTimeout(function() {
+      htmx.off('htmx:validateUrl', pathVerifier)
       btn.innerHTML.should.equal('foo')
       done()
     }, 30)
@@ -211,38 +217,66 @@ describe('security options', function() {
 
   it('can cancel egress request based on htmx:validateUrl event', function(done) {
     this.timeout(4000)
+    htmx.config.selfRequestsOnly = false
     // should trigger send error, rather than reject
     var pathVerifier = htmx.on('htmx:validateUrl', function(evt) {
       evt.preventDefault()
-      htmx.off('htmx:validateUrl', pathVerifier)
     })
     var listener = htmx.on('htmx:invalidPath', function() {
       htmx.off('htmx:invalidPath', listener)
+      htmx.off('htmx:validateUrl', pathVerifier)
       done()
     })
     this.server.restore() // use real xhrs
     // will 404, but should respond
     var btn = make('<button hx-get="https://hypermedia.systems/www/test">Initial</button>')
     btn.click()
+    htmx.config.selfRequestsOnly = true
   })
 
   it('can cancel egress request based on htmx:validateUrl event, sameHost is false', function(done) {
     this.timeout(4000)
+    htmx.config.selfRequestsOnly = false
     // should trigger send error, rather than reject
     var pathVerifier = htmx.on('htmx:validateUrl', function(evt) {
       if (evt.detail.sameHost === false) {
         evt.preventDefault()
       }
-      htmx.off('htmx:validateUrl', pathVerifier)
     })
     var listener = htmx.on('htmx:invalidPath', function() {
+      htmx.off('htmx:validateUrl', pathVerifier)
       htmx.off('htmx:invalidPath', listener)
       done()
     })
     this.server.restore() // use real xhrs
     // will 404, but should respond
     var btn = make('<button hx-get="https://hypermedia.systems/www/test">Initial</button>')
     btn.click()
+    htmx.config.selfRequestsOnly = true
+  })
+
+  it('can cancel egress request based on htmx:validateUrl event and then allow a request', function(done) {
+    htmx.config.selfRequestsOnly = false
+    var requestCount = 0
+    var pathVerifier = htmx.on('htmx:validateUrl', function(evt) {
+      requestCount = requestCount + 1
+      if (requestCount === 1) {
+        evt.preventDefault()
+      }
+    })
+    this.server.restore() // use real xhrs
+    var btn = make('<button hx-get="data:,foo">Initial</button>')
+    btn.click()
+    setTimeout(function() {
+      btn.innerHTML.should.not.equal('foo')
+      btn.click()
+      setTimeout(function() {
+        htmx.off('htmx:validateUrl', pathVerifier)
+        htmx.config.selfRequestsOnly = true
+        btn.innerHTML.should.equal('foo')
+        done()
+      }, 30)
+    }, 30)
   })
 
   it('can disable script tag support with htmx.config.allowScriptTags', function() {