Phoenix_live_view: Multiple forms rendering dynamically in the same page

[feliperenan]

Environment

• Elixir version (elixir -v): 1.10.2
• Phoenix version (mix deps): 1.5.1
• Phoenix LiveView version (mix deps): master
• NodeJS version (node -v): 10.4.0
• NPM version (npm -v): 6.1.0
• Operating system:
• Browsers you attempted to reproduce this bug on (the more the merrier): Chrome
• Does the problem persist after removing "assets/node_modules" and trying again? Yes/no: Yes

Actual behavior

It seems live view has an issue with live components and multiple forms on the same page. The issue happens when we try to render the second form that is inside a live component dynamically. Check this out:

It seems that it only happens if the dynamic form is a live component. If you just try to render the markup inside a live view or live component, it will work.

Reproduce the issue

Here is the reproduced repo. Go to /users/new and click on toggle button.

Expected behavior

The first form should still be on the page even though the second one will be rendered. If you try to render both in the first render, it will show them both - the issue occurs when you try to render it dynamically.

Please, let me know if I'm missing something 🙌

[josevalim]

@feliperenan just to make sure we are on the same page, can you please update the example repo to use LiveView master? Make sure to nuke assets/node_modules after updating before verifying the issue persists.

Also, can you please verify if the inputs have the same IDs or different ones? If they ID is the same, that would explain the issue. We may need to solve this in phoenix_html instead. :)

[feliperenan]

@josevalim I've updated my reproduced repo, now I'm sure it is using master branch 🙈 .

Yes, you are right. The issue is regarding inputs having same ids. Now I'm wondering what we could do in phoenix html to fix that since it should generate a unique ID for each input 🤔 . For now, I can fix this like that:

<%= text_input f, :name, id: "user_name_#{@id}" %>

But maybe we could do something like this in the form itself:

  <%= f = form_for @changeset, "#", id: "unique-id", prefix_id: @id %>
   ....
  </form>

Not sure If that makes sense though.

[josevalim]

@feliperenan I am thinking we should use the ID of the form as a prefix automatically. WDYT? Could you send a PR?

[feliperenan]

Well, It also works and I don't see any drawbacks 🤔 .

I'd love to send the PR, but will do it at the end of the day if that's ok :).

[josevalim]

Sorry for the delay. I have commented in both PRs. Just one small change and we are good to go! Closing this meanwhile.

[josevalim]

@feliperenan i have merged both, please give it a try in your actual project and if everything is good, ping me next week so i can ship new releases :)

[feliperenan]

Sure 👍

Thank you very much @josevalim

[shadowRR]

@josevalim Is there any issue(s) with those changes ? I've seen they've been merged to master over in the phoenix_html repo, but no new releases ?

[josevalim]

They are backwards incompatible, so they require a v3.0.0 release. That's why we are letting them brew for a while.

[shadowRR]

Copy that ! I'll use the temporary solution from @feliperenan in the meantime while keeping an eye on the new release.

[al2o3cr]

@josevalim the corresponding changes to phoenix_ecto (https://github.com/phoenixframework/phoenix_ecto/pull/128) shipped in 4.2.1 - which just broke a handful of tests when upgrading to Phoenix 1.5 from 1.4 :(

[josevalim]

Ouch, my bad. I forgot to bump phoenix_ecto to major and accidentally released it. :(