phx-change sends stale params after phx-submit when running inside Cypress browser

[diegonogueira]

Hi! I’m seeing a strange behavior with phx-change when my LiveView app is opened inside the Cypress browser (E2E runner). The same code works perfectly in a normal browser (Chrome/Firefox) in dev mode.

Environment

• Elixir version (elixir -v): 1.19.4
• Phoenix version (mix deps): 1.8.2
• Phoenix LiveView version (mix deps): 1.1.8
• Operating system: Linux (Arch)
• Browsers you attempted to reproduce this bug on (the more the merrier): Chrome, Electron
• Does the problem persist after removing "assets/node_modules" and trying again? Yes/no: Yes

Actual behavior

When running inside the Cypress browser:

Before the first phx-submit: phx-change behaves correctly.
After the first phx-submit on the form:
phx-change receives stale params (always one change behind).
This results in assigns/HTML also appearing one step behind the actual user input.

Expected behavior

phx-change should always receive the latest input value in params, regardless of whether a phx-submit has already been executed, and regardless of whether the app is opened in a normal browser or inside the Cypress runner.

[diegonogueira]

An additional detail is that this only seems to happen when using phx-debounce="blur" on the inputs.

[SteffenDE]

Can you please create a repository with a minimal Phoenix + Cypress setup that reproduces this? That would help a lot!

happen when using phx-debounce="blur"

So you input something, blur the input and then you don't see the result of that but of the previous event?

[diegonogueira]

It only happens after submitting the form, even if that submit handler only returns no_reply.
Before the submit, everything works fine; after the submit, it always returns the previous value.

[diegonogueira]

I created a basic example that shows the same problem.

Download the repository:

git clone https://github.com/diegonogueira/sample-lv-4071

Start the LiveView app:

cd myapp
mix ecto.create
mix phx.server

Run Cypress:

cd cypress
npm install
npm run cypress:open

How to reproduce the issue:

1. Fill the field with "abc".
2. Click outside (blur the field).
3. Focus the field again and fill it with "def".
4. Everything works as expected.
5. Click the Submit button.
6. Repeat the process. You will see that the value in the field always reverts to the previous state.

[diegonogueira]

screenrecording-2025-12-02_12-49-20.mp4

[SteffenDE]

This is an upstream issue in cypress. They override the native removeAttribute method and in some conditions it then fails to remove any attribute except target. See cypress-io/cypress#26206.

There was a PR to fix it, but it was closed because no test was provided: cypress-io/cypress#27311

The code in question is still there: https://github.com/cypress-io/cypress/blob/7b46b9bef75aafeb615d79e4e49c859765dc217f/packages/driver/src/cy/top_attr_guards.ts#L71-L79

I'll see if I can send a fix upstream.

[diegonogueira]

Another interesting detail: LiveView version 0.20.17 works perfectly. This issue only started happening from version 1.0 onwards.

I’ve added another project, myappold, to the repository for anyone who wants to test it.

mix.exs:

# {:phoenix_live_view, "~> 1.0.0-rc.1", override: true}, # Version with bug
{:phoenix_live_view, "~> 0.20.17", override: true},

https://github.com/diegonogueira/sample-lv-4071/tree/main