keep active focus when reconnecting (#3699)

* keep active focus when reconnecting

Relates to: https://elixirforum.com/t/how-to-reduce-impact-of-deployments-on-a-liveview/69660

* remove test for unused field

Author: SteffenDE

assets/js/phoenix_live_view/live_socket.js

@@ -138,7 +138,6 @@ export default class LiveSocket {
     this.viewLogger = opts.viewLogger
     this.metadataCallbacks = opts.metadata || {}
     this.defaults = Object.assign(clone(DEFAULTS), opts.defaults || {})
-    this.activeElement = null
     this.prevActive = null
     this.silenced = false
     this.main = null

assets/js/phoenix_live_view/view.js

@@ -888,8 +888,6 @@ export default class View {
     }
     this.destroyAllChildren()
     this.liveSocket.dropActiveElement(this)
-    // document.activeElement can be null in Internet Explorer 11
-    if(document.activeElement){ document.activeElement.blur() }
     if(this.liveSocket.isUnloaded()){
       this.showLoader(BEFORE_UNLOAD_LOADER_TIMEOUT)
     }

assets/test/live_socket_test.js

@@ -39,7 +39,6 @@ describe("LiveSocket", () => {
     expect(liveSocket.viewLogger).toBeUndefined()
     expect(liveSocket.unloaded).toBe(false)
     expect(liveSocket.bindingPrefix).toBe("phx-")
-    expect(liveSocket.activeElement).toBe(null)
     expect(liveSocket.prevActive).toBe(null)
   })
 
@@ -49,7 +48,6 @@ describe("LiveSocket", () => {
     expect(liveSocket.socket.onOpen).toBeDefined()
     expect(liveSocket.unloaded).toBe(false)
     expect(liveSocket.bindingPrefix).toBe("phx-")
-    expect(liveSocket.activeElement).toBe(null)
     expect(liveSocket.prevActive).toBe(null)
   })
 

test/e2e/support/form_live.ex

@@ -70,6 +70,7 @@ defmodule Phoenix.LiveViewTest.E2E.FormLive do
        Enum.into(params, %{
          "a" => "foo",
          "b" => "bar",
+         "c" => "baz",
          "id" => "test-form",
          "phx-change" => "validate"
        })
@@ -141,6 +142,7 @@ defmodule Phoenix.LiveViewTest.E2E.FormLive do
     >
       <input type="text" name="a" readonly value={@params["a"]} />
       <input type="text" name="b" value={@params["b"]} />
+      <input type="text" name="c" value={@params["c"]} />
       <button type="submit" phx-disable-with="Submitting" phx-click={JS.dispatch("test")}>
         Submit with JS
       </button>

test/e2e/tests/forms.spec.js

@@ -84,6 +84,8 @@ for(let path of ["/form/nested", "/form"]){
         await syncLV(page)
 
         await page.locator("input[name=b]").fill("test")
+        await page.locator("input[name=c]").fill("hello world")
+        await expect(page.locator("input[name=c]")).toBeFocused()
         await syncLV(page)
 
         await page.evaluate(() => new Promise((resolve) => window.liveSocket.disconnect(resolve)))
@@ -102,6 +104,10 @@ for(let path of ["/form/nested", "/form"]){
         await expect(page.locator(".phx-loading")).toHaveCount(0)
 
         await expect(page.locator("input[name=b]")).toHaveValue("test")
+        // c should still be focused (at least when not using a nested LV)
+        if(path === "/form"){
+          await expect(page.locator("input[name=c]")).toBeFocused()
+        }
 
         expect(webSocketEvents).toEqual(expect.arrayContaining([
           {type: "sent", payload: expect.stringContaining("phx_join")},
@@ -115,6 +121,8 @@ for(let path of ["/form/nested", "/form"]){
         await syncLV(page)
 
         await page.locator("input[name=b]").fill("test")
+        // blur, otherwise the input would not be morphed anyway
+        await page.locator("input[name=b]").blur()
         await expect(page.locator("form")).toHaveAttribute("phx-change", /push/)
         await syncLV(page)
 
@@ -132,6 +140,8 @@ for(let path of ["/form/nested", "/form"]){
         await syncLV(page)
 
         await page.locator("input[name=b]").fill("test")
+        // blur, otherwise the input would not be morphed anyway
+        await page.locator("input[name=b]").blur()
         await syncLV(page)
 
         await page.evaluate(() => new Promise((resolve) => window.liveSocket.disconnect(resolve)))
@@ -149,6 +159,8 @@ for(let path of ["/form/nested", "/form"]){
         await syncLV(page)
 
         await page.locator("input[name=b]").fill("test")
+        // blur, otherwise the input would not be morphed anyway
+        await page.locator("input[name=b]").blur()
         await syncLV(page)
 
         await page.evaluate(() => new Promise((resolve) => window.liveSocket.disconnect(resolve)))
@@ -166,6 +178,8 @@ for(let path of ["/form/nested", "/form"]){
         await syncLV(page)
 
         await page.locator("input[name=b]").fill("test")
+        // blur, otherwise the input would not be morphed anyway
+        await page.locator("input[name=b]").blur()
         await syncLV(page)
 
         await page.evaluate(() => new Promise((resolve) => window.liveSocket.disconnect(resolve)))