diff options
| author | Carson Gross <carson@bigsky.software> | 2024-06-18 10:28:53 -0600 |
|---|---|---|
| committer | Carson Gross <carson@bigsky.software> | 2024-06-18 10:28:53 -0600 |
| commit | f3ae976aa2e1dd425b11303adf22ae90712be455 (patch) | |
| tree | 18e68b24ebdb20f41d5ca1093ca8e0ad7c5ad66d | |
| parent | d35222446d6377932cd53572624d4c6b18b693ff (diff) | |
| download | htmx-f3ae976aa2e1dd425b11303adf22ae90712be455.tar.gz htmx-f3ae976aa2e1dd425b11303adf22ae90712be455.zip | |
fix outerHTML body swapping issue
fixes https://github.com/bigskysoftware/htmx/issues/2639
| -rw-r--r-- | src/htmx.js | 3 | ||||
| -rw-r--r-- | test/manual/body-swap/body.html | 3 | ||||
| -rw-r--r-- | test/manual/body-swap/index.html | 15 | ||||
| -rw-r--r-- | test/manual/index.html | 1 |
4 files changed, 22 insertions, 0 deletions
diff --git a/src/htmx.js b/src/htmx.js index 1f0b622f..bebe3785 100644 --- a/src/htmx.js +++ b/src/htmx.js @@ -1626,6 +1626,9 @@ var htmx = (function() { * @param {HtmxSettleInfo} settleInfo */ function swapOuterHTML(target, fragment, settleInfo) { + if (target.tagName === "BODY") { // special case the body to innerHTML because DocumentFragments can't contain a body elt unfortunately + return swapInnerHTML(target, fragment, settleInfo); + } /** @type {Node} */ let newElt const eltBeforeNewContent = target.previousSibling diff --git a/test/manual/body-swap/body.html b/test/manual/body-swap/body.html new file mode 100644 index 00000000..32277c86 --- /dev/null +++ b/test/manual/body-swap/body.html @@ -0,0 +1,3 @@ +<body> +<h1>A New Body, should still have a red border</h1> +</body> diff --git a/test/manual/body-swap/index.html b/test/manual/body-swap/index.html new file mode 100644 index 00000000..406daf54 --- /dev/null +++ b/test/manual/body-swap/index.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>Body Swap Test</title> + <script type="application/javascript" src="../../../src/htmx.js"></script> +</head> +<body style="padding: 20px; font-family: sans-serif;border: 6px solid red"> + <button hx-get="body.html" + hx-target="body" + hx-swap="outerHTML"> + Swap Body With outerHTML + </button> +</body> +</html> diff --git a/test/manual/index.html b/test/manual/index.html index 0c7d5c11..cda51718 100644 --- a/test/manual/index.html +++ b/test/manual/index.html @@ -17,6 +17,7 @@ <li><a href="poll-condition-test.html">Poll Conditionals</a></li> <li><a href="poll-clears-on-reinit-test.html">Polling Cancels On Reprocessing</a></li> <li><a href="cache-buster">Cache Busting Test</a></li> + <li><a href="body-swap">Body Swap Test</a></li> <li>Scroll Tests <ul> <li><a href="scroll-test-eventHandler.html">Scroll Event Handler</a></li> |