Render liveview in eex dialog and reset/destroy state when closed

Hey there,

I am trying to render a liveview(create/edit) inside a dialog from here: https://shoelace.style/components/dialog .
This works great, but unsurprisingly when I input anything, close the dialog, and reopen it, that data is still there.

The setup is the following:
There is a regular eex component that has the button and the dialog which is being rendered in app.html.eex.
The dialog looks like this inside its own eex component:

<sl-dialog class="dialog-overview">
  <%= live_render @conn, Web.TeamFormLive, session: %{
    "user_id" => @current_user.id,
    "edit" => true
  } %>
</sl-dialog>

Hierarchy:

app.html.eex
-add_workspace_button.html.eex
--workspace_form_dialog.html.eex
---team_form_live.html.heex

The question is that how could I reset or destroy the liveview when the dialog is closed, so that the user always starts from scratch?

If I could always go from mount that would be the most ideal.

Thank you

Ok this seems to help quite a bit: JavaScript interoperability — Phoenix LiveView v0.17.7

I can add an event listener on the hiding of the dialog, and then dispatch an event like so:

    document.getElementById('team-form').dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }))

But it seems like only submit is working.

I cannot seem to be able to trigger even change, or what would be even better a custom event, like phx-reset=“reset” and then handle that.

Any ideas for this?