bigskysoftware / bigskysoftware/htmx
htmx:oobErrorNoTarget event does not trigger
- Dominant language
- JavaScript
- Stars
- 49.4k
- Forks
- 1.7k
- Avg merge
- 3d 22h
- Merged PRs (30d)
- 30
Description
I can't get a [htmx:oobErrorNoTarget ](https://htmx.org/events/#htmx:oobErrorNoTarget) event to trigger.
>This event is triggered when an [out of band swap](https://htmx.org/docs/#oob_swaps) does not have a corresponding element in the DOM to switch with.
This minimal example I believe should trigger a htmx:oobErrorNoTarget event because there is no `#item-12345` element.
Interactive example: https://jsfiddle.net/8mwk2fha/
```html
htmx:oobErrorNoTarget event demo
// mock a xhr response
const server = sinon.fakeServer.create();
server.autoRespond = true;
server.respondWith('<div id="item-12345" hx-swap-oob="true">item 12345 element</div>');
const logger = (e) => console.log(e.type, e)
htmx.on('htmx:beforeSwap', logger);
htmx.on('htmx:oobBeforeSwap', logger);
htmx.on('htmx:oobAfterSwap', logger);
htmx.on('htmx:oobErrorNoTarget', logger);
```
-----
From what I see, the code ([link](https://github.com/bigskysoftware/htmx/blob/fa7223391ccab52eb69c083e0f2996410f8a65b7/src/htmx.js#L814)) that triggers the event can never fire.
```js
function oobSwap(oobValue, oobElement, settleInfo) {
var selector = "#" + getRawAttribute(oobElement, "id");
[...]
var targets = getDocument().querySelectorAll(selector);
if (targets) {
[...]
} else {
oobElement.parentNode.removeChild(oobElement);
triggerErrorEvent(getDocument().body, "htmx:oobErrorNoTarget", {content: oobElement});
}
```
The `querySelectorAll(selector)` is always a truthy value.
Contributor guide
Assessment
This issue has not been assessed yet.