Modals created with phx.gen.live not working

Phoenix Forum Questions / Help
,
1

I’ve recently upgraded an app to Phoenix 1.7, including all optional parts of the upgrade guide and set my mix file deps to the same versions as those generated by mix phx.new for a Phoenix 1.7.1 app, and copied the contents of the CoreComponents module and compared the Endpoint modules as well.

I’ve run mix archive.install hex phx_new 1.7.1 to ensure that I’m getting the generators for 1.7.1 and double checked all the steps in the upgrade guide…

When generating live views with mix phx.gen.live, the modal button in the generated show.html.heex isn’t popping up a modal. Instead, it’s causing a page load to the route for /show/edit path for the newly created live view, but no editing modal appears and the page still looks the same as the show route. In contrast,
with a newly generated phoenix project, clicking the edit button on a newly generated live view show template will display the editing modal and will not cause a full page load.

The one significant thing that’s different with this app from a newly generated one is that it’s still using webpack, following the patterns from earlier phx.new generators. However, live view is working fine in the app and so are several phoenix components (though most of the app is using Phoenix.View, still).

Anyone else encounter this kind of issue with the 1.7.x generators or have any ideas what could solve this?

2

What does your router look like?

There might be a route collision where that route is defined twice, once with get "/show/edit" ... and then later again with live "/show/edit" ...?

1 Like
3

That’s a good idea. I generated a schema and set of live views with completely novel names to rule it out, and in the process realized that app.js wasn’t getting executed for the generated live views. Now that that’s fixed, the socket is connecting, and hard page refreshes aren’t happening anymore!

There is still a styling issue preventing the modal from appearing. It seems the default modal in the Core Components uses a position: fixed and there’s something in the existing app preventing it from displaying properly but the main problem is resolved.

Thanks for the help!