[LiveComponent] Fix live component rendering when loaded from bfcache

[1ed]

Q	A
Bug fix?	yes
New feature?	no
Tickets	-
License	MIT

I have a live component with a form. On a fresh initial page load it works normally, but when I submit the form (not with ajax) and the controller redirects to another page and I come back using the browsers back button the live forms stops working. It does not re-render because of this check

https://github.com/symfony/ux/blob/73c656950c640b9a7f9aa9871356f0a24de61df7/src/LiveComponent/assets/src/live_controller.ts#L487-L490

If I comment it out, or I enable Turbo, it works. I think this is because bfcache of the browser. If I change the beforeunload listener to unload it works too, but that disables the cache.

Why we need this check? Can we leave it out? If we really need it we can use pagehide and pageshow instead. See https://webkit.org/blog/516/webkit-page-cache-ii-the-unload-event/

[weaverryan]

Thanks for this - nice catch. I believe the original code was added to fix a js error that might happen if our component kept running and tried to operate on elements that no longer appeared on the page after navigation… but I can’t remember correctly, and that commit appears to go back to the “initial commit” commit :/.

So I like your solution, but I’m also not familiar with these events. Also, one post I found says to use the page visibility api - https://www.igvita.com/2015/11/20/dont-lose-user-and-app-state-use-page-visibility/

And, I have one other possible idea. If the original intent was to avoid mutating some elements… when they are no longer on the page, could this be accomplished by connect() and disconnect()? In those methods, we store the state of the component (connected or not) and then skip the rendering if we are not connected?

[1ed]

I added a new commit to use connect disconnect, but I don't know how to test this properly, the previous test fails because it used page events. Maybe this something that should be tested by e2e test in a browser? I also added how to reproduce this on the 2.x branch (turbo should be disabled) to the description.

I had an other issue too: https://github.com/symfony/ux/commit/4e846d8688e8df773bd4e6861933561ec65d2455#diff-565bf0a4d7c4e904b165c4a2bc70ccb6101d31119b4a88ff0d9ed828537a33dfR3 this file is missing from the repository so the build can not run, or am I missing something?

[1ed]

Tests fixed by triggering controller connect/disconnect.

[weaverryan]

I had an other issue too: https://github.com/symfony/ux/commit/4e846d8688e8df773bd4e6861933561ec65d2455#diff-565bf0a4d7c4e904b165c4a2bc70ccb6101d31119b4a88ff0d9ed828537a33dfR3 this file is missing from the repository so the build can not run, or am I missing something?

thanks for mentioning that - it was a bad commit by me. Fixed now.