Liveview default modal re-renders on cancel and clicking the 'back' button

Phoenix Forum Questions / Help
, , ,
1

I opened an issue in github on that, but I wonder what is the possible workaround.

out-of-the-box generated modal re-renders when closing modal and clicking ‘back’ on browser. The modal was generated by the default generator phx.gen.live Everything works fine, but the modal re-rendering get’s stuck in a loop when using the browser’s back button. See gif
modal_repeat2

I changed the default JS.navigate to JS.patch but nothing changed either.

P.S I’m very new to Phoenix. Here is my actual repo. it’s not one page, but it comes with a SQLite DB saved in github too, so should work as is. When in the app, click on the Analysis in the main menu and then select one of Countries, States, Cities, Territories List . They all have the same issue and were all generated with the default phx.gen.live Thanks
combobox repo

2

Hmm, are you clicking on the web page outside of the modal in between clicking the back button?

The default .modal core component sets the phx-click-away binding to close the modal when clicking outside the modal. The default generated LiveView also passes a JS.patch command to the .modal via its on_cancel data attribute which is run upon phx-click-away event. This means that clicking away will update the browser history.

  1. Click on “Edit state” button => modal opens and “…/some_resource/show/edit” gets added to browser state
  2. Click outside the modal => modal closes and “…/some_resource” gets added to browser state
  3. Click back button => browser goes back to “…/some_resource/show/edit” and modal opens
  4. Back to step 2

Updated to add:
It sounds like what you want is for the clicking away to close the modal without affecting the browser state. You can set the replace: true option on JS.patch that opens and closes the modal as suggested here: LiveView needs a way to go back in browser history · Issue #857 · phoenixframework/phoenix_live_view · GitHub

3

Thanks @codeanpeace . I added the replace option, but it didn’t help.

<.table
  id="cities"
  rows={@streams.cities}
  row_click={fn {_id, city} -> JS.navigate(~p"/cities/#{city}") end}
>
  <:col :let={{_id, city}} label="City"><%= city.city_id %></:col>
  <:col :let={{_id, city}} label="City name"><%= city.city_name %></:col>
  <:col :let={{_id, city}} label="Country code"><%= city.country_code %></:col>
  <:col :let={{_id, city}} label="State code"><%= city.state_code %></:col>
  <:col :let={{_id, city}} label="Latitude"><%= city.latitude %></:col>
  <:col :let={{_id, city}} label="Longitude"><%= city.longitude %></:col>
  <:action :let={{_id, city}}>
    <div class="sr-only">
      <.link navigate={~p"/cities/#{city}"}>Show</.link>
    </div>
    <.link patch={~p"/cities/#{city}/edit"} replace={true}>Edit</.link>
  </:action>
  <:action :let={{id, city}}>
    <.link
      phx-click={JS.push("delete", value: %{id: city.id}) |> hide("##{id}")}
      data-confirm="Are you sure?"
    >
      Delete
    </.link>
  </:action>
</.table>

the is where and how I added it. Maybe it’s a wrong syntax? In the post you linked the indication was to put it in the index.html.heex where the link to the modal is. In my case it’s when the edit option is clicked

<.link patch={~p"/cities/#{city}/edit"} replace={true}>Edit</.link>

4

If you’re testing the “show” LiveView for a single state record like in your screen recording, you need to update that LiveView instead of or in addition to the “index” LiveView for multiple state records. You’ll also want to update the modal core component with replace true too otherwise a duplicate entry will get added to the browser history when closing the modal.

5

Thanks, I stuck it everywhere where there were a new/edit button as well as on every ‘on_cancel’ for every modal and it seemed to have worked. Thanks a lot.