[LiveComponent] Morph error trying to apply invalid classes

[aleho]

When live components try to apply changes to elements for some reason the different classes are picked up with whitespaces or even empty strings. Browser console then throws Uncaught (in promise) DOMException: DOMTokenList.remove: The empty string is not a valid token..

This happened here when an element was morphed that probably shouldn't have been in the first place (and data-skip-morph doesn't solve the problem).

---

For example when an inline menu (with ID and data-skip-morph) is displayed after clicking an element only the class "hidden" changes. Then after updating the live component the element and its menu are still there (but the menu should be invisible, as backend renders context menus hidden of course):

The changes that are picked up:

• addedClasses: Set [ "w-full" ].
• removedClasses: Set(3) [ "", "hidden\n", "w-full\n" ]

---

In my case, simply filtering class changes at least prevents the error and didn't have any side effects here:

className = className.trim();

if (className === '') {
    return;
}

ux/src/LiveComponent/assets/src/Rendering/ElementChanges.ts

Lines 13 to 23 in 80b36bc

	addClass(className: string) {
	if (!this.removedClasses.delete(className)) {
	this.addedClasses.add(className);
	}
	}
	removeClass(className: string) {
	if (!this.addedClasses.delete(className)) {
	this.removedClasses.add(className);
	}
	}

Am I doing something wrong?

[smnandre]

Where and how is the w-full set ? In template or JS ?

[aleho]

w-full is always on the Element. The only class that actually changes is hidden.

[smnandre]

Could you create a minimal reproducer ? It would be easier to investigate, thank you :)

[WebMamba]

Hey I tried to reproduce your issue on the UX website but couldn't! What I did was take a live component where the class changes and add space at the beginning of the class attribute on this component:

ux/ux.symfony.com/templates/components/InlineEditFood.html.twig

Line 17 in 3962582

class="form-control form-control-lg{{ error ? ' is-invalid' }}"

There may maybe something I don't understand about your issue, could you try to reproduce your issue on this component ?

[aleho]

After investigating further I finally found the root of the problem:

handleClassAttributeMutation doesn't consider the spec correctly.

According to the HTML standard the class attribute can contain "a set of space-separated tokens". Splitting on spaces only will tokenize newlines too resulting in an array containing newlines and empty spaces.

ux/src/LiveComponent/assets/src/Rendering/ExternalMutationTracker.ts

Lines 193 to 201 in 3962582

	const previousValues = previousValue ? previousValue.split(' ') : [];
	previousValues.forEach((value, index) => {
	const trimmedValue = value.trim();
	if (trimmedValue !== '') {
	previousValues[index] = trimmedValue;
	} else {
	previousValues.splice(index, 1);
	}
	});

You can easily reproduce this with a simple markup for a live component:

<div {{ attributes }}>
    <p
        class="
            a
            b
            c
        "
    >
        <button type="button" data-action="live#$render" onclick="this.parentElement.classList.remove('a')">
            Remove class and render
        </button>
    </p>
</div>

[smnandre]

But i think your markup is not valid.. class should not contain new lines

Ok i'm pretty sure we already had a problem with that but great if you have a fix :)