How to protect contenteditable value after server push message with LiveView?

Phoenix Forum Questions / Help
,
1

Hi, I want use Phoenix Liveview create a online excel web app.
The original post in SO, link is this.

For more detail, I write a simple code to description the problem:

Html snippet

<h2>Hello</h2>

Counter is: <%= @counter %>
<hr>

<button phx-click="dec">-</button>
<button phx-click="inc">+</button>

<div contenteditable="true" phx-blur="somedata"  phx-update="ignore">
    <%=@somedata%>
</div>

Server side(contains a timer to simulate message push):

defmodule TicTacWeb.MemberSchedulerLive do
  use Phoenix.LiveView


  def render(assigns) do
    TicTacWeb.PageView.render("member_scheduler.html", assigns)
  end

  def mount(_, socket) do
    IO.puts("mount")
    :timer.send_interval(3000, self(), :event_inc)
    {:ok, assign(socket, %{counter: 100, temperature: 200, somedata: "$001"})}
  end

  def handle_info(:event_inc, socket) do
    IO.puts("handle info event_inc.")
    {:noreply, assign(socket, :counter, socket.assigns.counter + 1)}
  end

  def handle_event("inc", _, socket) do
    {:noreply, update(socket, :counter, fn(x) -> x + 1 end)}
  end

  def handle_event("dec", _, socket) do
    IO.puts("item")
    {:noreply, update(socket, :counter, fn(x) -> x - 1 end)}
  end

  def handle_event("inc_temperature", _value, socket) do
    IO.puts("item22223")
    {:noreply, assign(socket, :temperature, 1234)}
  end

  def handle_event("somedata", _value, socket) do
    data = socket.assigns.somedata
    IO.puts("item22223333 value : #{data}")
    # {:ok, nil} = Thermostat.inc_temperature(socket.assigns.id)
    {:noreply, assign(socket, :somedata, data <> "$1234")}
  end
end

Problem:
The editing somedata div will revert if client receive the inc message from server by :timer.send_interval.

Question:

  1. how to prevent change contenteditable content if receive pushed message?
  2. why phoenix liveview revert the content which is not the relative data assigned value? Is it for designed?

Thanks

2

Can you try this? :thinking:

<div phx-update="ignore">
  <div contenteditable="true" phx-blur="somedata">
    <%=@somedata%>
  </div>
</div>
3

Thanks. I solved this by update liveview version to 0.4.1 which phx-update works.

1 Like