throw targetError correctly when target invalid during retarget

Author: MichaelWest22

src/htmx.js

@@ -4716,20 +4716,20 @@ var htmx = (function() {
   }
 
   /**
-   * Updates the responseInfo's target property if an HX-Retarget header is present
-   *
-   * @param {XMLHttpRequest} xhr
-   * @param {HtmxResponseInfo} responseInfo
+   * Resove the Retarget selector and throw if not found
    * @param {Element} elt
+   * @param {String} target
    */
-  function handleRetargetHeader(xhr, responseInfo, elt) {
-    if (hasHeader(xhr, /HX-Retarget:/i)) {
-      if (xhr.getResponseHeader('HX-Retarget') === 'this') {
-        responseInfo.target = elt
-      } else {
-        responseInfo.target = asElement(querySelectorExt(elt, xhr.getResponseHeader('HX-Retarget')))
-      }
+  function resolveRetarget(elt, target) {
+    if (target === 'this') {
+      return elt
+    }
+    const resolvedTarget = asElement(querySelectorExt(elt, target))
+    if (resolvedTarget == null) {
+      triggerErrorEvent(elt, 'htmx:targetError', { target })
+      throw new Error(`Invalid re-target ${target}`)
     }
+    return resolvedTarget
   }
 
   /**
@@ -4780,9 +4780,6 @@ var htmx = (function() {
       return
     }
 
-    // handle retargeting before determining history updates/resolving response handling
-    handleRetargetHeader(xhr, responseInfo, elt)
-
     const historyUpdate = determineHistoryUpdates(elt, responseInfo)
 
     const responseHandling = resolveResponseHandling(xhr)
@@ -4791,15 +4788,17 @@ var htmx = (function() {
     let ignoreTitle = htmx.config.ignoreTitle || responseHandling.ignoreTitle
     let selectOverride = responseHandling.select
     if (responseHandling.target) {
-      responseInfo.target = asElement(querySelectorExt(elt, responseHandling.target))
+      responseInfo.target = resolveRetarget(elt, responseHandling.target)
     }
     var swapOverride = etc.swapOverride
     if (swapOverride == null && responseHandling.swapOverride) {
       swapOverride = responseHandling.swapOverride
     }
 
     // response headers override response handling config
-    handleRetargetHeader(xhr, responseInfo, elt)
+    if (hasHeader(xhr, /HX-Retarget:/i)) {
+      responseInfo.target = resolveRetarget(elt, xhr.getResponseHeader('HX-Retarget'))
+    }
 
     if (hasHeader(xhr, /HX-Reswap:/i)) {
       swapOverride = xhr.getResponseHeader('HX-Reswap')

test/core/config.js

@@ -139,6 +139,58 @@ describe('htmx config test', function() {
     }
   })
 
+  it('throws targetError if you the target in responseHandling is invalid', function() {
+    var originalResponseHandling = htmx.config.responseHandling
+    try {
+      var error = false
+      var handler = htmx.on('htmx:targetError', function(evt) {
+        evt.detail.target.should.equal('#a-div')
+        error = true
+      })
+      htmx.config.responseHandling = originalResponseHandling.slice()
+      htmx.config.responseHandling.unshift({ code: '444', swap: true, target: '#a-div' })
+
+      var responseCode = null
+      this.server.respondWith('GET', '/test', function(xhr, id) {
+        xhr.respond(responseCode, { 'Content-Type': 'text/html' }, '' + responseCode)
+      })
+
+      responseCode = 444
+      var btn = make('<button hx-get="/test">Click Me!</button>')
+      btn.click()
+      this.server.respond()
+      btn.innerHTML.should.equal('Click Me!')
+    } catch (e) {
+    } finally {
+      htmx.config.responseHandling = originalResponseHandling
+      htmx.off('htmx:targetError', handler)
+      error.should.equal(true)
+    }
+  })
+
+  it('can change the target to "this" in a given response code', function() {
+    var originalResponseHandling = htmx.config.responseHandling
+    try {
+      htmx.config.responseHandling = originalResponseHandling.slice()
+      htmx.config.responseHandling.unshift({ code: '444', swap: true, target: 'this' })
+
+      var responseCode = null
+      this.server.respondWith('GET', '/test', function(xhr, id) {
+        xhr.respond(responseCode, { 'Content-Type': 'text/html' }, '' + responseCode)
+      })
+
+      responseCode = 444
+      var div = make('<div id="a-div">Another Div</div>')
+      var btn = make('<button hx-target="#a-div" hx-get="/test">Click Me!</button>')
+      btn.click()
+      this.server.respond()
+      btn.innerHTML.should.equal('444')
+      div.innerHTML.should.equal('Another Div')
+    } finally {
+      htmx.config.responseHandling = originalResponseHandling
+    }
+  })
+
   it('can change the swap type of a given response code', function() {
     var originalResponseHandling = htmx.config.responseHandling
     try {

test/core/headers.js

@@ -280,6 +280,26 @@ describe('Core htmx AJAX headers', function() {
     div2.innerHTML.should.equal('')
   })
 
+  it('should handle report target:error when HX-Retarget invalid', function() {
+    try {
+      var error = false
+      var handler = htmx.on('htmx:targetError', function(evt) {
+        evt.detail.target.should.equal('#d2')
+        error = true
+      })
+      this.server.respondWith('GET', '/test', [200, { 'HX-Retarget': '#d2' }, 'Result'])
+
+      var div1 = make('<div id="d1" hx-get="/test"></div>')
+      div1.click()
+      this.server.respond()
+    } catch (e) {
+    } finally {
+      htmx.off('htmx:targetError', handler)
+      div1.innerHTML.should.equal('')
+      error.should.equal(true)
+    }
+  })
+
   it('should handle HX-Reswap', function() {
     this.server.respondWith('GET', '/test', [200, { 'HX-Reswap': 'innerHTML' }, 'Result'])