How to prevent interaction with LiveView FormComponent while it's being cleaned up?

Questions / Help
,
1

This thread goes into preventing double-clicks of form buttons, using phx-disable-with:

I’m running into a separate issue. With a bit of latency (1000ms will do it), my FormComponent’s will block their Save buttons during saving, but will unblock them temporarily before LiveView commits the patch( or navigate(. This lets the user trigger an additional Save while the Form is being navigated away from.

Is there any recommended way to handle this? My hacky solution is to assign a disabled/dead param in my FormComponent’s save function to force the Form to remain locked.

Thanks!

2

Here’s my current solution in my FormComponent’s:

  @impl true
  def handle_event(name, _, %{assigns: %{dead: true}} = socket) do
    Logger.warning("Ignoring #{name} event to dead FormComponent")

    {:noreply, socket}
  end


...


  defp save_data(socket, :new, params) do
    case create(params) do
      {:ok, data} ->
        notify_parent({:created, data})

        {:noreply,
         socket
         |> assign(:dead, true)
         |> put_flash(:info, "Data created successfully")
         |> push_patch(to: socket.assigns.patch)}

      {:error, %Ecto.Changeset{} = changeset} ->
        {:noreply, assign_form(socket, changeset)}
    end
  end

This works well for any scenario where I’m navigating afterwards and know the FormComponent should ignore all additional interaction. It doesn’t work for any other duplicate events that I want to ignore when the component isn’t going away (eg a component with a delete button on a child.)