Fix: trigger phx-change event for input with phx-debounce=blur

ftes · ftes · commit 72edd9b67b69 · 2025-05-05T12:18:10.000+02:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 - Add locale to avoid console warnings. Commit [becf5e6] @peaceful-james
 
+### Fixed
+- Trigger `phx-change` event for input with `phx-debounce="blur"`
+
 ## [0.6.2] 2025-04-24
 ### Changed
 - `Frame.evaluate/3`: Don't transform map keys in return value. Example: `js {camelCase: {a: 1}} -> ex %{"camelCase": %{"a": 1}}`. Previously attempted to underscore and atom-ize keys, which led to issue [#24](https://github.com/ftes/phoenix_test_playwright/pull/24). Commit [5ff530]
diff --git a/lib/phoenix_test/playwright.ex b/lib/phoenix_test/playwright.ex
@@ -793,6 +793,9 @@ defmodule PhoenixTest.Playwright do
     |> fun.(%{timeout: timeout(opts)})
     |> handle_response(selector)
 
+    # trigger phx-change if phx-debounce="blur"
+    Frame.blur(session.frame_id, selector)
+
     %{session | last_input_selector: selector}
   end
 
diff --git a/lib/phoenix_test/playwright/frame.ex b/lib/phoenix_test/playwright/frame.ex
@@ -147,6 +147,15 @@ defmodule PhoenixTest.Playwright.Frame do
     |> unwrap_response(& &1)
   end
 
+  def blur(frame_id, selector, opts \\ []) do
+    params = %{selector: selector}
+    params = Enum.into(opts, params)
+
+    [guid: frame_id, method: :blur, params: params]
+    |> post()
+    |> unwrap_response(& &1)
+  end
+
   defp unwrap_response(response, fun) do
     case response do
       %{error: _} = error -> {:error, error}
diff --git a/test/phoenix_test/playwright_test.exs b/test/phoenix_test/playwright_test.exs
@@ -204,6 +204,13 @@ defmodule PhoenixTest.PlaywrightTest do
       |> assert_has("#form-data", text: "book-characters: Frodo")
     end
 
+    test "triggers phx-change event if phx-debounce=blur", %{conn: conn} do
+      conn
+      |> visit("/live/index")
+      |> fill_in("Debounce blur", with: "triggers")
+      |> assert_has("#form-data", text: "debounce-blur: triggers")
+    end
+
     test "raises an error when element can't be found with label", %{conn: conn} do
       assert_raise AssertionError, ~r/Could not find element/, fn ->
         conn
diff --git a/test/support/index_live.ex b/test/support/index_live.ex
@@ -187,6 +187,9 @@ defmodule PhoenixTest.IndexLive do
       <label for={@uploads.avatar.ref}>Avatar</label>
       <.live_file_input upload={@uploads.avatar} />
 
+      <label for="debounce-blur">Debounce blur</label>
+      <input id="debounce-blur" phx-debounce="blur" name="debounce-blur" phx-update="ignore" />
+
       <button type="submit" name="full_form_button" value="save">Save Full Form</button>
     </form>
 
