search

phoenixframework / phoenix_live_view

Rich, real-time user experiences with server-rendered HTML
https://hex.pm/packages/phoenix_live_view
MIT License
6.18k stars 931 forks source link

Document that form fields shouldn't have names that are DOM properties #1418

Closed wanton7 closed 3 years ago

wanton7 commented 3 years ago

I hit the odd issue when I had a form with hidden input that had name id. It would cause form to be duplicated. Found out it's an known issue with morphdom.

Related thread https://elixirforum.com/t/i-had-the-weirdest-problem-with-liveviews-change-tracking-when-name-attribute-has-value-id/39008

Here you can see what happens https://burningchrome.com/~fnd/_/19c4516b-8d17-4d8b-b732-7cfdf4ca49e8.html

morphdom vs. named fields results in the surrounding form being duplicated rather than replaced. This is because if such a field exists within a form, form.id returns that DOM node rather than the form’s id attribute value.

It's actually documented in morphdom's github repo https://github.com/patrick-steele-idem/morphdom

getNodeKey (Function(node)) - Called to get the Node's unique identifier. This is used by morphdom to rearrange elements rather than creating and destroying an element that already exists. This defaults to using the Node‘s id property. (Note that form fields must not have a name corresponding to forms’ DOM properties, e.g. id.)

I think this should be documented in LiveView's documentation.

mcrumm commented 3 years ago

Yep, the MDN docs for the input name attribute call this out too. It definitely leads to some strange behaviour! I added a note to the form guide, thanks!