LiveView validation of a form with a Trix editor field

Phoenix Forum Questions / Help
, ,
1

Hi there,

I have added a Trix editor (2.0.4) field into a LiveView form (Phoenix 1.7.0). My problem is that the form’s phx-change event handler receives the previous value of the editor contents not the current one:

<.simple_form for={@form} id="ticket-form" phx-change="validate" phx-submit="save">
  <.input field={@form[:subject]} type="text" label="Subject" />
  <input
    type="hidden"
    name={@form[:description].name}
    id={@form[:description].id}
    value={@form[:description].value}
    />
  <div id={"ignore-#{@form[:description].id}"} phx-update="ignore">
    <trix-editor input={@form[:description].id} class="trix-content"></trix-editor>
  </div>
  <:actions>
    <.button phx-disable-with="Saving...">Save Ticket</.button>
  </:actions>
</.simple_form>

An example:

  1. the field originally contains the value 123
  2. I append 4 to it
  3. the hidden input field correctly updated with the value 1234
  4. phx-change handler receives the value 123

If I replace trix-editor with a textarea and not change anything else then it works perfectly:

<.simple_form for={@form} id="ticket-form" phx-change="validate" phx-submit="save">
  <.input field={@form[:subject]} type="text" label="Subject" />
  <textarea name={@form[:description].name} id={@form[:description].id}>
    <%= @form[:description].value %>
  </textarea>
  <:actions>
    <.button phx-disable-with="Saving...">Save Ticket</.button>
  </:actions>
</.simple_form>

Any idea?

Thx