[LiveComponent] breaking without data-model declared

[robert-hoffmann]

Look like i broke the system again ^^

live_controller.js:258 Uncaught (in promise) Error: Cannot determine the model name for "<input type="checkbox" data-payload="{ &quot;courseId&quot;: 16, &quot;studentId&quot;: 50, &quot;year&quot;: 2023, &quot;week&quot;: 8 }">": the element must either have a "data-model" (or "name" attribute living inside a <form data-model="*">).

I have a list rendered with twig in a live component, this list has zero data-model dependencies (plain ole html)

However i spit out some checkboxes, and when i click the submit button, i fire off an api call to do some background work. This call gets all the selected checkboxes from the list and extracts metadata to populate the post request

<input
    type="checkbox"
    data-payload='{ "courseId": {{this.course.id}}, "studentId": {{student.id}}, "year": {{this.year}}, "week": {{this.week}} }'
    data-model="stupidPlaceHolder"
/>

However since i have a data-payload attribute, now live components expects a data-model attribute 😁

IMO, unless a reserved keyword, all attributes not matching those used by live components should be ignored.

Symfony is probably just detecting data-* with a regex

Would be nice to have this work diffrerently, or maybe a data-ignore attribute (at least like that i don't have to declare a placeholder in the component.php)

/**
 * INFO: only declared here because otherwise will break the component
 * and click behavior, if an element has a data-whatever, but no data-model
 */
#[LiveProp(writable: true)]
public ?string $stupidPlaceHolder = null;

Thanks 👍

[robert-hoffmann]

Update

I had to remove this

/**
 * INFO: only declared here because otherwise will break the component
 * and click behavior, if an element has a data-whatever, but no data-model
 */
#[LiveProp(writable: true)]
public ?string $stupidPlaceHolder = null;

As it causes other problems, and i had to resort to doing it like this

<input
    type="checkbox"
    payload='{ "courseId": {{this.course.id}}, "studentId": {{student.id}}, "year": {{this.year}}, "week": {{this.week}} }'
/>

Live components just doesn't like that you use data-* on your attributes 😒

IMO, live components should ignore any attribute that isn't part of live components, so that we can still use data-* and access our content via js and ele.dataset.*

.. i use this all the time for storing temporary data or special values

[weaverryan]

Fixed in #747 - we had a small case where we specifically treated <input type="checkbox" in a special way, incorrectly. LiveComponents has no problem with custom data- attributes. I'm not sure why the data-payload attribute was triggering things for you - but I was able to reproduce the issue then fix it.

[robert-hoffmann]

Nice, thanks 👍