[LiveComponent] Fix live component rendering when loaded from bfcache

Author: 1ed

src/LiveComponent/assets/dist/live_controller.js

@@ -1246,9 +1246,13 @@ class default_1 extends Controller {
         this.markAsWindowUnloaded = () => {
             this.isWindowUnloaded = true;
         };
+        this.markAsWindowNotUnloaded = () => {
+            this.isWindowUnloaded = false;
+        };
     }
     initialize() {
         this.markAsWindowUnloaded = this.markAsWindowUnloaded.bind(this);
+        this.markAsWindowNotUnloaded = this.markAsWindowNotUnloaded.bind(this);
         this.handleUpdateModelEvent = this.handleUpdateModelEvent.bind(this);
         this.handleInputEvent = this.handleInputEvent.bind(this);
         this.handleChangeEvent = this.handleChangeEvent.bind(this);
@@ -1266,7 +1270,8 @@ class default_1 extends Controller {
             throw new Error('Invalid Element Type');
         }
         this._initiatePolling();
-        window.addEventListener('beforeunload', this.markAsWindowUnloaded);
+        window.addEventListener('pagehide', this.markAsWindowUnloaded);
+        window.addEventListener('pageshow', this.markAsWindowNotUnloaded);
         this._startAttributesMutationObserver();
         this.element.addEventListener('live:update-model', this.handleUpdateModelEvent);
         this.element.addEventListener('input', this.handleInputEvent);
@@ -1277,7 +1282,8 @@ class default_1 extends Controller {
     disconnect() {
         this._stopAllPolling();
         __classPrivateFieldGet(this, _instances, "m", _clearRequestDebounceTimeout).call(this);
-        window.removeEventListener('beforeunload', this.markAsWindowUnloaded);
+        window.removeEventListener('pagehide', this.markAsWindowUnloaded);
+        window.removeEventListener('pageshow', this.markAsWindowNotUnloaded);
         this.element.removeEventListener('live:update-model', this.handleUpdateModelEvent);
         this.element.removeEventListener('input', this.handleInputEvent);
         this.element.removeEventListener('change', this.handleChangeEvent);

src/LiveComponent/assets/src/live_controller.ts

@@ -87,6 +87,7 @@ export default class extends Controller implements LiveController {
 
     initialize() {
         this.markAsWindowUnloaded = this.markAsWindowUnloaded.bind(this);
+        this.markAsWindowNotUnloaded = this.markAsWindowNotUnloaded.bind(this);
         this.handleUpdateModelEvent = this.handleUpdateModelEvent.bind(this);
         this.handleInputEvent = this.handleInputEvent.bind(this);
         this.handleChangeEvent = this.handleChangeEvent.bind(this);
@@ -111,7 +112,8 @@ export default class extends Controller implements LiveController {
 
         this._initiatePolling();
 
-        window.addEventListener('beforeunload', this.markAsWindowUnloaded);
+        window.addEventListener('pagehide', this.markAsWindowUnloaded);
+        window.addEventListener('pageshow', this.markAsWindowNotUnloaded);
         this._startAttributesMutationObserver();
         this.element.addEventListener('live:update-model', this.handleUpdateModelEvent);
         this.element.addEventListener('input', this.handleInputEvent);
@@ -125,7 +127,8 @@ export default class extends Controller implements LiveController {
         this._stopAllPolling();
         this.#clearRequestDebounceTimeout();
 
-        window.removeEventListener('beforeunload', this.markAsWindowUnloaded);
+        window.removeEventListener('pagehide', this.markAsWindowUnloaded);
+        window.removeEventListener('pageshow', this.markAsWindowNotUnloaded);
         this.element.removeEventListener('live:update-model', this.handleUpdateModelEvent);
         this.element.removeEventListener('input', this.handleInputEvent);
         this.element.removeEventListener('change', this.handleChangeEvent);
@@ -799,6 +802,10 @@ export default class extends Controller implements LiveController {
         this.isWindowUnloaded = true;
     };
 
+    markAsWindowNotUnloaded = () => {
+        this.isWindowUnloaded = false;
+    };
+
     handleConnectedControllerEvent(event: any) {
         if (event.target === this.element) {
             return;

src/LiveComponent/assets/test/controller/render.test.ts

@@ -232,7 +232,7 @@ describe('LiveController rendering Tests', () => {
 
         test.controller.$render();
         // imitate navigating away
-        fireEvent(window, createEvent('beforeunload', window));
+        fireEvent(window, createEvent('pagehide', window));
 
         // wait for the fetch to finish
         await fetchMock.flush();
@@ -241,6 +241,37 @@ describe('LiveController rendering Tests', () => {
         expect(test.element).not.toHaveTextContent('Hello');
     });
 
+    it('renders if the page is navigating away and back', async () => {
+        const test = await createTest({greeting: 'aloha!'}, (data: any) => `
+            <div ${initComponent(data)}>${data.greeting}</div>
+        `);
+
+        test.expectsAjaxCall('get')
+            .expectSentData(test.initialData)
+            .serverWillChangeData((data) => {
+                data.greeting = 'Hello';
+            })
+            .delayResponse(100)
+            .init();
+
+        test.controller.$render();
+        // imitate navigating away
+        fireEvent(window, createEvent('pagehide', window));
+        // wait for the fetch to finish
+        await fetchMock.flush();
+
+        expect(test.element).toHaveTextContent('aloha!')
+
+        // navigate back
+        fireEvent(window, createEvent('pageshow', window));
+        test.controller.$render();
+        // wait for the fetch to finish
+        await fetchMock.flush();
+
+        // the re-render should have happened
+        expect(test.element).toHaveTextContent('Hello');
+    });
+
     it('waits for the previous request to finish & batches changes', async () => {
         const test = await createTest({ title: 'greetings', contents: '' }, (data: any) => `
             <div ${initComponent(data, { debounce: 1 })}>