window.location update timing with push_patch versus JS.patch

[dmarkow]

Environment

• Elixir version (please paste the output of elixir -v):

Erlang/OTP 27 [erts-15.2.7.4] [source] [64-bit] [smp:16:16] [ds:16:16:10] [async-threads:1] [jit]

Elixir 1.19.4 (compiled with Erlang/OTP 27)

• Phoenix and LiveView versions (mix deps | grep -w 'phoenix\|phoenix_live_view'):

* phoenix 1.8.3 (Hex package) (mix)
  locked at 1.8.3 (phoenix) 36169f95
* phoenix_live_view 1.1.19 (Hex package) (mix)
  locked at 1.1.19 (phoenix_live_view) d5ad357d

• Operating system:

• Windows
• MacOS
• Linux
• Other (please specify):

• Browsers (including version) you attempted to reproduce this bug on (the more the merrier):

Latest Chrome and Safari

Actual behavior

When patching the current page, the timing of when hooks have their updated() callbacks called in relation to the browser's URL updating differs based on if you use push_patch in a handle_event call, or if you use patch from JS (either with phx-click={JS.patch(...)} or by using this.js().patch(...) from inside a hook).

Single File Demo which has a hook that logs the current URL every time it's updated.

Running that demo, open the browser console:

• Click the first server push_patch button, query params will get test=1 added and the hook will log that correct URL
• Click the first JS.patch button, query params will now have test=2 and the browser URL will look correct. However, the log from the hook still reports the old URL, as updated() was called before window.location was updated.
• Click the second JS.patch button to set test=3, the console will log the test=2 location. Click back and forth and you'll see it always logs what the URL was right before the button was clicked, not the new one.
• Click the server push_patch button again, it will go back to test=1 and the console will log test=1 correctly.
• Do the same on the second set of buttons (which all use navigate instead of patch) and everything works fine.

Expected behavior

Calling patch from JS should update window.location before updating the hooks just like push_patch does.

[stjhimy]

I was able to reproduce your bug and fix with a small patch.
Could you try running your example with this branch? https://github.com/stjhimy/phoenix_live_view/tree/fix-4093

[dmarkow]

@stjhimy Seems to fix it perfectly, including the issue I was having in my production app.

[stjhimy]

@dmarkow opened a PR #4096
Hopefully it will get merged soon.