Send JS command values on phx-submit (#3688)

* Send JS command values on phx-submit

Alternative implementation for #3674.

Co-Authored-By: João Otávio Biondo <[email protected]>

* clarify and test precedence

---------

Co-authored-by: João Otávio Biondo <[email protected]>

Author: SteffenDE

assets/js/phoenix_live_view/view.js

@@ -67,8 +67,8 @@ export let prependFormDataKey = (key, prefix) => {
   return baseKey
 }
 
-let serializeForm = (form, metadata, onlyNames = []) => {
-  const {submitter, ...meta} = metadata
+let serializeForm = (form, opts, onlyNames = []) => {
+  const {submitter} = opts
 
   // We must inject the submitter in the order that it exists in the DOM
   // relative to other inputs. For example, for checkbox groups, the order must be maintained.
@@ -133,8 +133,6 @@ let serializeForm = (form, metadata, onlyNames = []) => {
     submitter.parentElement.removeChild(injectedElement)
   }
 
-  for(let metaKey in meta){ params.append(metaKey, meta[metaKey]) }
-
   return params.toString()
 }
 
@@ -1197,12 +1195,13 @@ export default class View {
       ], phxEvent, "change", opts)
     }
     let formData
-    let meta  = this.extractMeta(inputEl.form)
-    if(inputEl instanceof HTMLButtonElement){ meta.submitter = inputEl }
+    let meta = this.extractMeta(inputEl.form, {}, opts.value)
+    let serializeOpts = {}
+    if(inputEl instanceof HTMLButtonElement){ serializeOpts.submitter = inputEl }
     if(inputEl.getAttribute(this.binding("change"))){
-      formData = serializeForm(inputEl.form, {_target: opts._target, ...meta}, [inputEl.name])
+      formData = serializeForm(inputEl.form, serializeOpts, [inputEl.name])
     } else {
-      formData = serializeForm(inputEl.form, {_target: opts._target, ...meta})
+      formData = serializeForm(inputEl.form, serializeOpts)
     }
     if(DOM.isUploadInput(inputEl) && inputEl.files && inputEl.files.length > 0){
       LiveUploader.trackFiles(inputEl, Array.from(inputEl.files))
@@ -1213,6 +1212,7 @@ export default class View {
       type: "form",
       event: phxEvent,
       value: formData,
+      meta: {_target: opts._target, ...meta},
       uploads: uploads,
       cid: cid
     }
@@ -1326,22 +1326,24 @@ export default class View {
         if(LiveUploader.inputsAwaitingPreflight(formEl).length > 0){
           return this.undoRefs(ref, phxEvent)
         }
-        let meta = this.extractMeta(formEl)
-        let formData = serializeForm(formEl, {submitter, ...meta})
+        let meta = this.extractMeta(formEl, {}, opts.value)
+        let formData = serializeForm(formEl, {submitter})
         this.pushWithReply(proxyRefGen, "event", {
           type: "form",
           event: phxEvent,
           value: formData,
+          meta: meta,
           cid: cid
         }).then(({resp}) => onReply(resp))
       })
     } else if(!(formEl.hasAttribute(PHX_REF_SRC) && formEl.classList.contains("phx-submit-loading"))){
-      let meta = this.extractMeta(formEl)
-      let formData = serializeForm(formEl, {submitter, ...meta})
+      let meta = this.extractMeta(formEl, {}, opts.value)
+      let formData = serializeForm(formEl, {submitter})
       this.pushWithReply(refGenerator, "event", {
         type: "form",
         event: phxEvent,
         value: formData,
+        meta: meta,
         cid: cid
       }).then(({resp}) => onReply(resp))
     }

assets/test/js_test.js

@@ -565,6 +565,93 @@ describe("JS", () => {
       JS.exec(event, "change", form.getAttribute("phx-change"), view, input, args)
     })
 
+    test("form change event with phx-value and JS command value", done => {
+      let view = setupView(`
+      <div id="modal" class="modal">modal</div>
+      <form id="my-form"
+        phx-change='[["push", {"event": "validate", "_target": "username", "value": {"command_value": "command","nested":{"array":[1,2]}}}]]'
+        phx-submit="submit"
+        phx-value-attribute_value="attribute"
+      >
+        <input type="text" name="username" id="username" phx-click=''></div>
+      </form>
+      `)
+      let form = document.querySelector("#my-form")
+      let input = document.querySelector("#username")
+      view.pushWithReply = (refGen, event, payload) => {
+        expect(payload).toEqual({
+          "cid": null,
+          "event": "validate",
+          "type": "form",
+          "value": "_unused_username=&username=",
+          "meta": {
+            "_target": "username",
+            "command_value": "command",
+            "nested": {
+              "array": [1, 2]
+            },
+            "attribute_value": "attribute"
+          },
+          "uploads": {}
+        })
+        return Promise.resolve({resp: done()})
+      }
+      let args = ["push", {_target: input.name, dispatcher: input}]
+      JS.exec(event, "change", form.getAttribute("phx-change"), view, input, args)
+    })
+
+    test("form change event prefers JS.push value over phx-value-* over input value", (done) => {
+      let view = setupView(`
+        <form id="my-form" phx-value-name="value from phx-value param" phx-change="[[&quot;push&quot;,{&quot;value&quot;:{&quot;name&quot;:&quot;value from push opts&quot;},&quot;event&quot;:&quot;change&quot;}]]">
+          <input id="textField" name="name" value="input value" />
+        </form>
+      `)
+      let form = document.querySelector("#my-form")
+      let input = document.querySelector("#textField")
+      view.pushWithReply = (refGen, event, payload) => {
+        expect(payload).toEqual({
+          "cid": null,
+          "event": "change",
+          "type": "form",
+          "value": "_unused_name=&name=input+value",
+          "meta": {
+            "_target": "name",
+            "name": "value from push opts"
+          },
+          "uploads": {}
+        })
+        return Promise.resolve({resp: done()})
+      }
+      let args = ["push", {_target: input.name, dispatcher: input}]
+      JS.exec(event, "change", form.getAttribute("phx-change"), view, input, args)
+    })
+  
+    test("form change event prefers phx-value-* over input value", (done) => {
+      let view = setupView(`
+        <form id="my-form" phx-value-name="value from phx-value param" phx-change="change">
+          <input id="textField" name="name" value="input value" />
+        </form>
+      `)
+      let form = document.querySelector("#my-form")
+      let input = document.querySelector("#textField")
+      view.pushWithReply = (refGen, event, payload) => {
+        expect(payload).toEqual({
+          "cid": null,
+          "event": "change",
+          "type": "form",
+          "value": "_unused_name=&name=input+value",
+          "meta": {
+            "_target": "name",
+            "name": "value from phx-value param"
+          },
+          "uploads": {}
+        })
+        return Promise.resolve({resp: done()})
+      }
+      let args = ["push", {_target: input.name, dispatcher: input}]
+      JS.exec(event, "change", form.getAttribute("phx-change"), view, input, args)
+    })
+
     test("form change event with string event", done => {
       let view = setupView(`
       <div id="modal" class="modal">modal</div>
@@ -589,7 +676,8 @@ describe("JS", () => {
           event: "validate",
           type: "form",
           uploads: {},
-          value: "_unused_username=&username=&_unused_other=&other=&_target=username"
+          value: "_unused_username=&username=&_unused_other=&other=",
+          meta: {"_target": "username"}
         })
         return Promise.resolve({resp: done()})
       }
@@ -620,7 +708,8 @@ describe("JS", () => {
           event: "username_changed",
           type: "form",
           uploads: {},
-          value: "_unused_username=&username=&_target=username"
+          value: "_unused_username=&username=",
+          meta: {"_target": "username"}
         })
         return Promise.resolve({resp: done()})
       }
@@ -651,7 +740,8 @@ describe("JS", () => {
           event: "username_changed",
           type: "form",
           uploads: {},
-          value: "_unused_username=&username=&_target=username"
+          value: "_unused_username=&username=",
+          meta: {"_target": "username"}
         })
         return Promise.resolve({resp: done()})
       }
@@ -670,7 +760,46 @@ describe("JS", () => {
       let form = document.querySelector("#my-form")
 
       view.pushWithReply = (refGen, event, payload) => {
-        expect(payload).toEqual({"cid": null, "event": "save", "type": "form", "value": "username=&desc="})
+        expect(payload).toEqual({
+          "cid": null,
+          "event": "save",
+          "type": "form",
+          "value": "username=&desc=",
+          "meta": {}
+        })
+        return Promise.resolve({resp: done()})
+      }
+      JS.exec(event, "submit", form.getAttribute("phx-submit"), view, form, ["push", {}])
+    })
+
+    test("submit event with phx-value and JS command value", done => {
+      let view = setupView(`
+      <div id="modal" class="modal">modal</div>
+      <form id="my-form"
+            phx-change="validate"
+            phx-submit='[["push", {"event": "save", "value": {"command_value": "command","nested":{"array":[1,2]}}}]]'
+            phx-value-attribute_value="attribute"
+      >
+        <input type="text" name="username" id="username" />
+        <input type="text" name="desc" id="desc" phx-change="desc_changed" />
+      </form>
+      `)
+      let form = document.querySelector("#my-form")
+
+      view.pushWithReply = (refGen, event, payload) => {
+        expect(payload).toEqual({
+          "cid": null,
+          "event": "save",
+          "type": "form",
+          "value": "username=&desc=",
+          "meta": {
+            "command_value": "command",
+            "nested": {
+              "array": [1, 2]
+            },
+            "attribute_value": "attribute"
+          }
+        })
         return Promise.resolve({resp: done()})
       }
       JS.exec(event, "submit", form.getAttribute("phx-submit"), view, form, ["push", {}])