Modal within component within liveview

Phoenix Forum Questions / Help
,
1

I am having trouble with a modal that is displayed in a component. we are updated the url based on an id, and the modal almost works. however, sometimes on first click it will just bring you back to the first id in the liveview instead of rendering the modal. also, it kind of breaks a bit of javascript (i.e. my carousel). here is how it is implemented in the live view:

 def handle_event("show_activity_modal", %{"id" => id}, socket) do
    {:ok, activity} = @data.get_activity_by_id(id)
    socket = assign(socket, :featured_activity, activity)

    {:noreply, push_patch(socket, to: "#{socket.assigns.globals.request_uri.path}?activity_id=#{id}")}
  end

and

 <.modal :if={@featured_activity} id="featured-activity-modal" full_width>
      <.live_component
        liked_activity_ids={@liked_activity_ids}
        globals={@globals}
        id={"featured-activity-modal-#{@featured_activity.id}"}
        module={ActivityDetailsLive}
        activity={@featured_activity}
      />
    </.modal>

and here, in the component:

<.link
              phx-click={
                JS.dispatch("scorpion:track", detail: %{event_name: "Product Clicked", event_data: %{activity_id: @video.activity.id}})
                |> JS.push("show_activity_modal", value: %{"id" => @video.activity.id})
                |> show_modal("featured-activity-modal")
              }
              class="inline-flex text-sm px-8 py-2.5 text-white rounded-xl border border-yellow-600 ml-auto"
            >
              <div class="flex gap-2 items-center">
                <div class="align-middle text-base"><%= gettext("Learn More") %>
                  <Heroicons.chevron_double_right class="w-4 mb-0.5 stroke-yellow-600 inline" /></div>
              </div>
            </.link>

thank you!

2

Just a sanity check, @data is intended as a module attribute right?

Hmm, if that’s the default client side show_modal function from the generated core components, the modal may be getting “overwritten” when the preceded "show_activity_modal" event pushed to the server causes a re-render.

3

I’m a bit confused by what you are describing, but its not because you are using push_patch rather than push_navigate though is it?

4

right, this makes sense. for some reason, though, it’s throwing an error saying it needs a push event when I remove the JS.push

5

i think push_navigate is only for navigating to a new liveview, whereas i’m just opening a modal

6

That’s odd, what’s throwing the error? Can you share it?

Did you update the component so it’s not dependent on the server adding a @featured_activity assign to the socket?

Also, if you’re using the generated .modal component, there’s already some logic around showing/hiding the modal which defaults to hiding that may overlap with :if={@featured_activity}.