symfony
Error: The data-live-preserve attribute requires an id attribute
Using an id prop on a nested LiveComponent causes an error when child model is updated from parent.
Error:
Error: The data-live-preserve attribute requires an id attribute to be set on the element at live_controller.js:1353:1
How to reproduce
See https://github.com/kachnitel/symfony-live-component-bug/commit/9d28445789bf758be0710059e5549001f8ead3b0
- clone repo and install dependencies
- start server and go to homepage
- click the (small and empty) button to call an action in parent component to update data model
- witness error
LiveComponent used data-id attributes before, but to follow idiomorph usage and more generally the hotwire (Stimulus, Turbo) suite, LiveComponent uses "id" attributes since 2.15 (see UPGRADE.md there).
So you should avoid setting it yourself for nested / child component i guess... did you try to pass "key" instead of "id" ?
Yep using key instead of id solves the issue.
I used the id attribute primarily based on this section of documentation, having been unsure if there's any internal "magic" watching the ID that wouldn't be covered by "key". That said, I've used "key" everywhere I needed an id and it works as expected.
Suppose it's just a matter of documentation update then?
I'm glad if that works for you 😃
The documentation does require an update indeed... would you like to open a PR ?
Haha I'm the worst at docs so that's a good motivation to give it a shot! I should be able to catch some breath a bit tomorrow (pending client meeting anyways) so I'll tackle have a go at it.