htmx
htmx copied to clipboard
Published
20 hours ago •
bigskysoftware
bigskysoftware
Preload extension fails with Safari on macOS
trafficstars
Summary
The preload extension fails to initialise on Safari, with the error TypeError: null is not an object (evaluating 'event.target.querySelectorAll') - preload.js:138.
Line 138 in [preload.js](https://github.com/bigskysoftware/htmx/blob/master/src/ext/preload.js) is:
// Search for all child nodes that have a "preload" attribute
event.target.querySelectorAll("[preload]").forEach(function(node) {
// Initialize the node with the "preload" attribute
init(node)
// Initialize all child elements that are anchors or have `hx-get` (use with care)
node.querySelectorAll("a,[hx-get],[data-hx-get]").forEach(init)
})
It appears Safari returns null for event.target when other browsers do not.
Versions
- Safari v17.4 on macOS Sonoma
- HTMX v1.9.12
- Preload extension v1.9.12
Example for reproduction
<!doctype html>
<html lang="en-GB">
<head>
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/[email protected]/dist/ext/preload.js"></script>
</head>
<body hx-ext="preload">
<ul id="list">
<li>Test</li>
</ul>
<div hx-get="/some_url" hx-target="#list" hx-select="#list" preload>
Get Some HTML
</div>
</body>
</html>
Would replacing event.target.querySelectorAll("[preload]").forEach(function(node) { with document.querySelectorAll("[preload]").forEach(function(node) { resolve this issue?
I wonder if the same fix than in #2391 could be applied here ? Seems like the same underlying issue
