From c3662ce00df72117912c68ce22ca4045b7e6fb30 Mon Sep 17 00:00:00 2001
From: Ben Lenton <85029602+B-Lenton@users.noreply.github.com>
Date: Fri, 30 Sep 2022 21:08:46 +0100
Subject: [PATCH] Allow 'unset' directive for hx-vals and hx-vars (#1013)

* Allow 'unset' directive for hx-vals and hx-vars

* PR feedback

Co-authored-by: Ben Lenton <benlenton@Bens-MacBook-Air.local>
---
 src/htmx.js                |  4 ++-
 test/attributes/hx-vals.js | 69 ++++++++++++++++++++++++++++++++++++-
 test/attributes/hx-vars.js | 70 +++++++++++++++++++++++++++++++++++++-
 3 files changed, 140 insertions(+), 3 deletions(-)

diff --git a/src/htmx.js b/src/htmx.js
index f2b884d2..927a6798 100644
--- a/src/htmx.js
+++ b/src/htmx.js
@@ -2419,6 +2419,9 @@ return (function () {
             if (attributeValue) {
                 var str = attributeValue.trim();
                 var evaluateValue = evalAsDefault;
+                if (str === "unset") {
+                    return null;
+                }
                 if (str.indexOf("javascript:") === 0) {
                     str = str.substr(11);
                     evaluateValue = true;
@@ -3294,4 +3297,3 @@ return (function () {
     }
 )()
 }));
-
diff --git a/test/attributes/hx-vals.js b/test/attributes/hx-vals.js
index 949df818..e2728e2c 100644
--- a/test/attributes/hx-vals.js
+++ b/test/attributes/hx-vals.js
@@ -184,5 +184,72 @@ describe("hx-vals attribute", function() {
         div.innerHTML.should.equal("Clicked!");
     });
 
+    it('basic hx-vals can be unset', function () {
+        this.server.respondWith("POST", "/vars", function (xhr) {
+            var params = getParameters(xhr);
+            params.should.be.empty;
+            xhr.respond(200, {}, "Clicked!")
+        });
+        make(
+            "<div hx-vals='\"i1\":\"test\"'>\
+                <div id='d1' hx-post='/vars' hx-vals='unset'></div>\
+            </div>"
+        );
+        var div = byId("d1");
+        div.click();
+        this.server.respond();
+        div.innerHTML.should.equal("Clicked!");
+    });
 
-});
\ No newline at end of file
+    it('basic hx-vals with braces can be unset', function () {
+        this.server.respondWith("POST", "/vars", function (xhr) {
+            var params = getParameters(xhr);
+            params.should.be.empty;
+            xhr.respond(200, {}, "Clicked!")
+        });
+        make(
+            "<div hx-vals='{\"i1\":\"test\"}'>\
+                <div id='d1' hx-post='/vars' hx-vals='unset'></div>\
+            </div>"
+        );
+        var div = byId("d1");
+        div.click();
+        this.server.respond();
+        div.innerHTML.should.equal("Clicked!");
+    });
+
+    it('multiple hx-vals can be unset', function () {
+        this.server.respondWith("POST", "/vars", function (xhr) {
+            var params = getParameters(xhr);
+            params.should.be.empty;
+            xhr.respond(200, {}, "Clicked!")
+        });
+        make(
+            "<div hx-vals='\"v1\":\"test\", \"v2\":42'>\
+                <div id='d1' hx-post='/vars' hx-vals='unset'></div>\
+            </div>"
+        );
+        var div = byId("d1");
+        div.click();
+        this.server.respond();
+        div.innerHTML.should.equal("Clicked!");
+    });
+
+    it('unsetting hx-vals maintains input values', function () {
+        this.server.respondWith("POST", "/include", function (xhr) {
+            var params = getParameters(xhr);
+            params['i1'].should.equal("test");
+            xhr.respond(200, {}, "Clicked!")
+        });
+        var div = make(
+            "<div hx-target='this' hx-vals='\"i1\":\"best\"'>\
+                <input hx-post='/include' hx-vals='unset' hx-trigger='click' id='i1' name='i1' value='test'/>\
+            </div>"
+        )
+        var input = byId("i1")
+        input.click();
+        this.server.respond();
+        div.innerHTML.should.equal("Clicked!");
+    });
+
+});
diff --git a/test/attributes/hx-vars.js b/test/attributes/hx-vars.js
index 6d487c39..be20caf4 100644
--- a/test/attributes/hx-vars.js
+++ b/test/attributes/hx-vars.js
@@ -84,4 +84,72 @@ describe("hx-vars attribute", function() {
         div.innerHTML.should.equal("Clicked!");
     });
 
-});
\ No newline at end of file
+    it('basic hx-vars can be unset', function () {
+        this.server.respondWith("POST", "/vars", function (xhr) {
+            var params = getParameters(xhr);
+            params.should.be.empty;
+            xhr.respond(200, {}, "Clicked!")
+        });
+        make(
+            "<div hx-vars='i1:\"test\"'>\
+                <div id='d1' hx-post='/vars' hx-vars='unset'></div>\
+            </div>"
+        );
+        var div = byId("d1");
+        div.click();
+        this.server.respond();
+        div.innerHTML.should.equal("Clicked!");
+    });
+
+    it('basic hx-vars with braces can be unset', function () {
+        this.server.respondWith("POST", "/vars", function (xhr) {
+            var params = getParameters(xhr);
+            params.should.be.empty;
+            xhr.respond(200, {}, "Clicked!")
+        });
+        make(
+            "<div hx-vars='{i1:\"test\"}'>\
+                <div id='d1' hx-post='/vars' hx-vars='unset'></div>\
+            </div>"
+        );
+        var div = byId("d1");
+        div.click();
+        this.server.respond();
+        div.innerHTML.should.equal("Clicked!");
+    });
+
+    it('multiple hx-vars can be unset', function () {
+        this.server.respondWith("POST", "/vars", function (xhr) {
+            var params = getParameters(xhr);
+            params.should.be.empty;
+            xhr.respond(200, {}, "Clicked!")
+        });
+        make(
+            "<div hx-vars='v1:\"test\", v2:42'>\
+                <div id='d1' hx-post='/vars' hx-vars='unset'></div>\
+            </div>"
+        );
+        var div = byId("d1");
+        div.click();
+        this.server.respond();
+        div.innerHTML.should.equal("Clicked!");
+    });
+
+    it('unsetting hx-vars maintains input values', function () {
+        this.server.respondWith("POST", "/include", function (xhr) {
+            var params = getParameters(xhr);
+            params['i1'].should.equal("test");
+            xhr.respond(200, {}, "Clicked!")
+        });
+        var div = make(
+            "<div hx-target='this' hx-vars='i1:\"best\"'>\
+                <input hx-post='/include' hx-vars='unset' hx-trigger='click' id='i1' name='i1' value='test'/>\
+            </div>"
+        )
+        var input = byId("i1")
+        input.click();
+        this.server.respond();
+        div.innerHTML.should.equal("Clicked!");
+    });
+
+});