bigskysoftware
`body` content not selected when `hx-select="body"` is set
When an element has hx-select="body" applied to it, no content is selected from a given response, and instead a blank response is swapped in. For example, using the following:
import flask
app = flask.Flask(__name__)
@app.route("/")
def index():
return """<!doctype html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/htmx.min.js"></script>
</head>
<body>
<button hx-get="/alt" hx-target="body">click me</button>
</body>
</html>"""
@app.route("/alt")
def bad():
return """<!doctype html>
<body>
<div style="background-color: #df4093">swapped page</div>
<p>howdy</p>
</body>
</html>"""
Clicking the button when hx-select="body" is applied will swap in an empty response.
If the hx-select attribute is removed from the button, the contents of the response's body will be swapped as normal (ironically, mimicking the behaviour expected when the attribute is present).
Unfortunately, I think there's more to this than just what is demonstrated here - this issue stems from a more complex error-handling setup in a larger app and I think there are other things going on there that might lead to the same condition happening that I've been struggling to isolate.
Cheers :)
Sorry hx-select of body is not possible in htmx. The default behaviour without any hx-select is to swap in the whole body of the response if there is one or the whole response if its a partial response with no body. So I think there should be no real need to do a hx-select of body in practice.
The reason it does not work is because hx-select is a css slector used with a querySelector on the response content and in this case the response content will be stripped down from a full document response to just the body and its contents. And querySelector can only find children elements and not the root element itself by design so searching for 'body' will find nothing.
Is there another value to use as the selector to revert back to the whole body of the response? For the hx-select attribute you can presumably use hx-disinherit, but what about overwriting the select in events or the response handling config?
Apparently there is hx-select=unset, it's just not documented https://github.com/bigskysoftware/htmx/issues/2246