evaluate js commands during form recovery (#3608)

Fixes #3607.

Author: SteffenDE

assets/js/phoenix_live_view/js.js

@@ -65,7 +65,7 @@ let JS = {
     let pushOpts = {loading, value, target, page_loading: !!page_loading}
     let targetSrc = eventType === "change" && dispatcher ? dispatcher : sourceEl
     let phxTarget = target || targetSrc.getAttribute(view.binding("target")) || targetSrc
-    view.withinTargets(phxTarget, (targetView, targetCtx) => {
+    const handler = (targetView, targetCtx) => {
       if(!targetView.isConnected()){ return }
       if(eventType === "change"){
         let {newCid, _target} = args
@@ -78,7 +78,14 @@ let JS = {
       } else {
         targetView.pushEvent(eventType, sourceEl, targetCtx, event || phxEvent, data, pushOpts, callback)
       }
-    })
+    }
+    // in case of formRecovery, targetView and targetCtx are passed as argument
+    // as they are looked up in a template element, not the real DOM
+    if(args.targetView && args.targetCtx){
+      handler(args.targetView, args.targetCtx)
+    } else {
+      view.withinTargets(phxTarget, handler)
+    }
   },
 
   exec_navigate(e, eventType, phxEvent, view, sourceEl, el, {href, replace}){

assets/js/phoenix_live_view/view.js

@@ -54,6 +54,7 @@ import DOMPatch from "./dom_patch"
 import LiveUploader from "./live_uploader"
 import Rendered from "./rendered"
 import ViewHook from "./view_hook"
+import JS from "./js"
 
 export let prependFormDataKey = (key, prefix) => {
   let isArray = key.endsWith("[]")
@@ -1413,10 +1414,17 @@ export default class View {
     this.withinTargets(phxTarget, (targetView, targetCtx) => {
       const cid = this.targetComponentID(newForm, targetCtx)
       pending++
-      targetView.pushInput(input, targetCtx, cid, phxEvent, {_target: input.name}, () => {
-        pending--
-        if(pending === 0){ callback() }
-      })
+      let e = new CustomEvent("phx:form-recovery", {detail: {sourceElement: oldForm}})
+      JS.exec(e, "change", phxEvent, this, input, ["push", {
+        _target: input.name,
+        targetView,
+        targetCtx,
+        newCid: cid,
+        callback: () => {
+          pending--
+          if(pending === 0){ callback() }
+        }
+      }])
     }, templateDom, templateDom)
   }
 

test/e2e/support/form_live.ex

@@ -84,6 +84,10 @@ defmodule Phoenix.LiveViewTest.E2E.FormLive do
     update(socket, :params, &Map.delete(&1, "phx-change"))
   end
 
+  def update_params(socket, %{"js-change" => _}) do
+    update(socket, :params, &Map.put(&1, "phx-change", JS.push("validate")))
+  end
+
   def update_params(socket, _), do: socket
 
   @impl Phoenix.LiveView

test/e2e/tests/forms.spec.js

@@ -110,6 +110,23 @@ for(let path of ["/form/nested", "/form"]){
         ]))
       })
 
+      test("JS command in phx-change works during recovery", async ({page}) => {
+        await page.goto(path + "?" + additionalParams + "&js-change=1")
+        await syncLV(page)
+
+        await page.locator("input[name=b]").fill("test")
+        await expect(page.locator("form")).toHaveAttribute("phx-change", /push/)
+        await syncLV(page)
+
+        await page.evaluate(() => new Promise((resolve) => window.liveSocket.disconnect(resolve)))
+        await expect(page.locator(".phx-loading")).toHaveCount(1)
+
+        await page.evaluate(() => window.liveSocket.connect())
+        await syncLV(page)
+        await expect(page.locator(".phx-loading")).toHaveCount(0)
+        await expect(page.locator("input[name=b]")).toHaveValue("test")
+      })
+
       test("does not recover when form is missing id", async ({page}) => {
         await page.goto(`${path}?no-id&${additionalParams}`)
         await syncLV(page)