Update happens abnormally when using Trix editor in LiveView

nallwhy · June 11, 2023, 5:15pm

Hi, I’m trying to use Trix editor in LiveView.

But input is updated once every twice type in Trix editor.

You can try this in the page below.

How can I fix this problem?

tcoopman · June 11, 2023, 5:19pm

Can you show the code you’re using?

nallwhy · June 11, 2023, 5:21pm

Thanks!

github.com

nallwhy/json_corp/blob/main/apps/json_corp_web/lib/json_corp_web/live/playgrounds/form_live.ex

defmodule JsonCorpWeb.Playgrounds.FormLive do
  use JsonCorpWeb, :live_view
  alias __MODULE__.RoutineParams

  @code_url "https://github.com/nallwhy/json_corp/blob/main/apps/json_corp_web/lib/json_corp_web/live/playgrounds/form_live.ex"

  @impl true
  def mount(_params, _session, socket) do
    form = RoutineParams.to_form(%{steps: [%{}]}, validate: false)

    socket =
      socket
      |> assign(:code_url, @code_url)
      |> assign(:routines, [])
      |> assign(:form, form)
      |> assign(:hour, "")

    {:ok, socket}
  end

This file has been truncated. show original

tcoopman · June 11, 2023, 7:23pm

I don’t know how Trix works exactly, but what I read on the GitHub seems to be that it updates the input with the same id.
I guess that’s the artifacts you’re seeing?
You update trix → which updates the text area (first change)-> which triggers a form change → rerender (second change?)

I’m not on my pc so hard to verify this assumption.
What are you trying to do exactly? Can you first verify what form changes you get when you type anything in trix.

nallwhy · June 12, 2023, 8:41am

I expected that update trix -> update input -> trigger form change -> event! but trix -> update input doesn’t work well.

I solved this problem with this comment.