Bug: `data-live-preserve` breaks when parent element's ID changes during morph

[Pechynho]

Symfony version(s) affected

2.34.0

Description

Elements with data-live-preserve lose their preserved DOM state when any ancestor element's ID changes between re-renders. The innerHTML shortcut path in the morphdom logic bypasses the preserve mechanism entirely, causing the preserved element to be replaced with a freshly parsed DOM node.

How to reproduce

<div id="parent-live-component">
    <div id="container-with-random-id-on-every-render-of-parent-component-123">
        <div id="child-live-component">...</div>
    </div>
</div>

After rerender of "parent-live-component", server returns something like this

<div id="parent-live-component">
    <div id="container-with-random-id-on-every-render-of-parent-component-789">
        <div id="child-live-component" data-live-preserve></div>
    </div>
</div>

The child component, which should be preserved loses all its DOM state.

Root cause

In https://github.com/symfony/ux/blob/2.x/src/LiveComponent/assets/src/morphdom.ts, the beforeNodeMorphed callback has this logic:

  if (fromEl.hasAttribute('data-skip-morph') || (fromEl.id && fromEl.id !== toEl.id)) {
      fromEl.innerHTML = toEl.innerHTML;
      return true;
  }

When a parent element's ID changes (fromEl.id !== toEl.id), this code does a brute-force innerHTML replacement of all children. This is a native DOM operation — Idiomorph's callbacks (beforeNodeMorphed, beforeNodeRemoved) are never invoked for any of the children.

The data-live-preserve mechanism relies on those callbacks to skip morphing preserved elements. Since they're never called, the preserved element is silently destroyed and replaced by a fresh element parsed from the HTML string. The original element remains orphaned in the originalElementsToPreserve map, and its ID is never added to originalElementIdsToSwapAfter, so the post-morph swap never runs.

Suggested fix

After the innerHTML swap, restore any preserved elements that were inside the affected parent:

  if (fromEl.hasAttribute('data-skip-morph') || (fromEl.id && fromEl.id !== toEl.id)) {
      fromEl.innerHTML = toEl.innerHTML;

      // Restore preserved elements destroyed by innerHTML swap
      originalElementsToPreserve.forEach((originalElement, id) => {
          const placeholder = fromEl.querySelector(`#${id}`);
          if (placeholder) {
              syncAttributes(placeholder, originalElement);
              placeholder.replaceWith(originalElement);
          }
      });

      return true;
  }

Possible Solution

No response

Additional Context

No response

[Pechynho]

Two distinct cases exist where data-live-preserve child components get destroyed during parent morph.

Case 1: Child inside a data-skip-morph zone - full server-side re-render

When a child live component sits inside (or is itself) an element with data-skip-morph, the morphdom beforeNodeMorphed callback replaces the entire subtree via innerHTML assignment, bypassing Idiomorph callbacks entirely. This silently destroys the preserved child's DOM state.

Proposed solution: Before sending the parent re-render request, detect this situation in getChildrenFingerprints() and exclude the child's fingerprint from the request payload. Without the fingerprint, the server's InterceptChildComponentRenderSubscriber won't intercept the child's render - so it gets a full server-side re-render instead of an empty data-live-preserve placeholder. The innerHTML swap then naturally contains the complete, fresh child HTML.

File: assets/src/Component/plugins/ChildComponentPlugin.ts

private getChildrenFingerprints(): ChildrenFingerprints {
    const fingerprints: ChildrenFingerprints = {};

    this.getChildren().forEach((child) => {
        if (!child.id) {
            throw new Error('missing id');
        }

        if (this.isChildBehindSkipMorph(child)) {
            return;
        }

        fingerprints[child.id] = {
            fingerprint: child.fingerprint as string,
            tag: child.element.tagName.toLowerCase(),
        };
    });

    return fingerprints;
}

private isChildBehindSkipMorph(child: Component): boolean {
    let el: HTMLElement | null = child.element;
    while (el && el !== this.component.element) {
        if (el.hasAttribute('data-skip-morph')) {
            return true;
        }
        el = el.parentElement;
    }
    return false;
}

Case 2: Parent element ID change - post-innerHTML restore + deferred re-render

When an intermediate element's id changes between renders (e.g. <div id="tab-1"> to <div id="tab-2">), morphdom treats it like data-skip-morph and does an innerHTML swap. Unlike Case 1, this cannot be predicted before the request - the ID change is only known when the server response arrives. The child's fingerprint was already sent, so the server returned an empty data-live-preserve placeholder.

Proposed solution: After each innerHTML swap inside the beforeNodeMorphed callback, search the new content for preserved element IDs. If found, swap the original DOM element back in (preserving JS state, event listeners, etc.) and collect it into an array. After the entire morphdom process completes (including the post-morph ID swap loop), dispatch a live:preserve-restored custom event on each collected element. The live controller listens for this event and triggers a deferred re-render via setTimeout, ensuring the component gets fresh server state.

Optimization: A handledPreserveIds Set tracks preserved elements already processed by any code path - Idiomorph same-ID match (fromEl.id === toEl.id - morph prevented), clone+swap path (element moved to a different position), or node removal path. The innerHTML restore loop checks this Set and skips already-handled elements entirely, avoiding unnecessary querySelector calls and preventing double-processing of elements that Idiomorph already resolved correctly.

File: assets/src/morphdom.ts

// Declared at the top of executeMorphdom():
const handledPreserveIds = new Set<string>();
const elementsToNotifyPreserveRestored: HTMLElement[] = [];

// Idiomorph same-ID match - element stays in place, mark as handled:
if (fromEl.id === toEl.id) {
    handledPreserveIds.add(fromEl.id);
    return false;
}

// Clone+swap path - element is moving, mark as handled:
originalElementIdsToSwapAfter.push(id);
handledPreserveIds.add(id);

// Inside beforeNodeMorphed, after innerHTML swap:
if (fromEl.hasAttribute('data-skip-morph') || (fromEl.id && fromEl.id !== toEl.id)) {
    fromEl.innerHTML = toEl.innerHTML;

    originalElementsToPreserve.forEach((originalElement, id) => {
        if (handledPreserveIds.has(id)) {
            return; // already handled by Idiomorph - skip
        }
        const placeholder = fromEl.querySelector(`#${CSS.escape(id)}`);
        if (placeholder) {
            syncAttributes(placeholder, originalElement);
            placeholder.replaceWith(originalElement);
            handledPreserveIds.add(id);
            elementsToNotifyPreserveRestored.push(originalElement);
        }
    });

    return true;
}

// At the very end of executeMorphdom(), after all morph operations:
elementsToNotifyPreserveRestored.forEach((el) => {
    el.dispatchEvent(new CustomEvent('live:preserve-restored'));
});

File: assets/src/live_controller.ts

private elementEventListeners = [
    { event: 'input', callback: (event) => this.handleInputEvent(event) },
    { event: 'change', callback: (event) => this.handleChangeEvent(event) },
    { event: 'live:preserve-restored', callback: () => setTimeout(() => this.component.render(), 0) },
];

Why two approaches?

Scenario	Predictable before request?	Strategy
data-skip-morph between parent and child	Yes - DOM is inspectable	Don't send fingerprint - server fully re-renders child
Element ID change between renders	No - only known from server response	Restore original element after innerHTML swap - dispatch deferred re-render event