[LiveComponent] Rebuild Component on reconnect when props changed in between

When a parent action removes and re-adds a child live component that lives
on the same DOM element, Stimulus reuses the controller instance — it only
calls disconnect() then connect() again, not initialize(). createComponent()
is therefore never re-run, so the Component keeps a stale ValueStore that no
longer matches the freshly rendered HTML, and Component.set() throws
"Invalid model name" the next time the user types into a field.

Detect the divergence in connect() by comparing the current propsValue with
the props the Component was originally built with, and rebuild it when they
differ. Behavior is unchanged on the first connect() (props match by
construction) and on plain reconnects without any prop change.

Fixes #3424

Author: Amoifr

src/LiveComponent/assets/src/live_controller.ts

@@ -93,6 +93,16 @@ export default class LiveControllerDefault extends Controller<HTMLElement> imple
     }
 
     connect() {
+        // Stimulus only calls initialize() once per controller instance. When
+        // the same DOM element is disconnected then reconnected (e.g. a parent
+        // morphs it back in with new props), connect() is called again on the
+        // existing controller. If the props now differ from what the Component
+        // was built with, the ValueStore is stale and would reject any model
+        // matching the new server-rendered HTML — so rebuild the Component.
+        if (JSON.stringify(this.propsValue) !== JSON.stringify(this.component.valueStore.getOriginalProps())) {
+            this.createComponent();
+        }
+
         this.connectComponent();
 
         this.mutationObserver.observe(this.element, {

src/LiveComponent/assets/test/unit/controller/basic.test.ts

@@ -12,7 +12,7 @@ import Component from '../../../src/Component';
 import { findComponents } from '../../../src/ComponentRegistry';
 import { htmlToElement } from '../../../src/dom_utils';
 import { getComponent } from '../../../src/live_controller';
-import { createTest, initComponent, shutdownTests, startStimulus } from '../../tools';
+import { createTest, getStimulusApplication, initComponent, shutdownTests, startStimulus } from '../../tools';
 
 describe('LiveController Basic Tests', () => {
     afterEach(() => {
@@ -52,4 +52,32 @@ describe('LiveController Basic Tests', () => {
         await expect(getComponent(test.element)).rejects.toThrow('Component not found for element');
         expect(findComponents(test.component, false, null)).toEqual([]);
     });
+
+    it('rebuilds the Component on reconnect when props changed in between', async () => {
+        const test = await createTest({ greeting: 'aloha' }, (data: any) => `<div ${initComponent(data)}></div>`);
+
+        const controller = getStimulusApplication().getControllerForElementAndIdentifier(test.element, 'live') as any;
+        const originalComponent = controller.component;
+        expect(originalComponent.valueStore.getOriginalProps()).toEqual({ greeting: 'aloha' });
+
+        // simulate a parent morph: same controller instance, fresh props from the server
+        controller.disconnect();
+        controller.propsValue = { greeting: 'hello' };
+        controller.connect();
+
+        expect(controller.component).not.toBe(originalComponent);
+        expect(controller.component.valueStore.getOriginalProps()).toEqual({ greeting: 'hello' });
+    });
+
+    it('keeps the existing Component on reconnect when props are unchanged', async () => {
+        const test = await createTest({ greeting: 'aloha' }, (data: any) => `<div ${initComponent(data)}></div>`);
+
+        const controller = getStimulusApplication().getControllerForElementAndIdentifier(test.element, 'live') as any;
+        const originalComponent = controller.component;
+
+        controller.disconnect();
+        controller.connect();
+
+        expect(controller.component).toBe(originalComponent);
+    });
 });