elixir - 更新实时视图时如何保持输入的重点？

Question

我有一个实时视图，当用户更新表单元素中的文本输入时添加一个p标签。typing...我希望typing..在用户模糊文本输入时将其删除。

<section class="phx-hero">
  <%= if @typing do %>
    <p>typing...</p>
  <% end %>
  <form phx-change="typing" phx-submit="send-message">
    <input type="text" phx-blur="stopped-typing" name="msg" value="<%= @msg %>" placeholder="Send message..."/>
    <button type="submit" phx-disable-with="Sending...">Submit</button>
  </form>
</section>

事件通过以下方式处理：

  @impl true
  def mount(_params, _session, socket) do
    {:ok, assign(socket, typing: false, msg: "")}
  end

  @impl true
  def handle_event("send-message", %{"msg" => msg}, socket) do
    {:noreply, assign(socket, msg: msg)}
  end

  @impl true
  def handle_event("typing", %{"msg" => msg}, socket) do
    {:noreply, assign(socket, typing: true, msg: msg)}
  end

  @impl true
  def handle_event("stopped-typing", _, socket) do
    {:noreply, assign(socket, typing: false)}
  end

问题是当我最初在输入框中输入时，它失去了焦点，我必须重新点击它才能继续输入。

Answer 1

我想出了一个解决办法：

我必须将其包装<p>typing...</>在父容器中

<div>
  <%= if @typing do %>
    <p>typing...</p>
  <% end %>
</div>

我认为 DOM 补丁在section添加“打字...”段落时正在更新所有子项。