Liveview: phx-click resets form input

why

Hello,

on a LiveView page, I have a form whose single text input gets cleared when I click on a separate, unrelated div that uses phx-click.

I would like the input not to be affected by the phx-click, if possible. Is there a way to accomplish this, or is this a limitation in LiveView?

I pasted my code below. Steps to reproduce:

Type some text (one or two sentences) into the input (without submitting)
Click on the “click me” text
Input field is now cleared

  def render(assigns) do
    ~L"""

    Live Text: <%= @live_text%>

    <form phx-change="type_live" phx-submit="submit", placeholder="Type something...">
      <input type="text" name="q" value="<%= @query %>"/>
    </form>

    <div phx-click="test" phx-value-test="successfully clicked"><%= @test%></div>

    """
  end

  def mount(_params, _session, socket) do
    {:ok, assign(socket, query: nil, live_text: "", test: "click me")}
  end

  def handle_event("type_live", %{"q" => query}, socket)  do
    live_text = query
    {:noreply, assign(socket, live_text: live_text)}
  end

  def handle_event("submit", %{"q" => query}, socket) do
    {:noreply, assign(socket, query: query)}
  end

  def handle_event("test", %{"test" => test}, socket) do
    {:noreply, assign(socket, test: test)}
  end

8 comments

/phoenix #assigns #liveview

1 3920 8

2020-04-03 14:25:08 UTC

Showing Posts 1 to 8

Show Best Posts
Show All (oldest first)
Show All (newest first)

benwilson512

Author of Craft GraphQL APIs in Elixir with Absinthe

Hi @why you need to be capturing the form state via phx-change if there will be changes on the page. LiveView’s job is to render something based on the view state, and then make that rendered HTML happen on the client.

You are update the state on the server via phx-click, and so the live view re-renders with what it knows. It doesn’t know about the form state, so it clobbers it. The trick is to inform live view about the form state via phx-change.

Post #1

why

Thanks @benwilson512.

I have phx-change="type_live" on the form, would that not be doing the trick to let LiveVIew know about the state of the form?

Post #2

benwilson512

Author of Craft GraphQL APIs in Elixir with Absinthe

Oh sorry I missed that. Your issue is that the you’re binding type_live’s text to live_text but in the input type you do value="<%= @query %>". The assign used in the input should match the assign you’re storing the text in.

Post #3

why

Cool, that fixed it! Thanks

I now have:

def handle_event("type_live", %{"q" => query}, socket)  do
    live_text = query
    {:noreply, assign(socket, query: query, live_text: live_text)}
end

I think what threw me off is that it worked partially before. With each additional letter entered into the input (i.e. with each phx-change), and thus with each change of live_text in the assigns, LV successfully re-rendered the HTML in the place where @live_text is. So those re-renders worked without clearing the form, but the phx-click didn’t.

Any idea why it worked with phx-change, but not with phx-click?

Post #4

benwilson512

Author of Craft GraphQL APIs in Elixir with Absinthe

I think this is because as you were typing, the text field had focus, and phoenix won’t overwrite a form field that is actively in focus and being typed in. Otherwise there would be race conditions between the text being entered and the server’s knowledge / re-rendering of the field being actively typed in. When you clicked on the div, the input lost focus and could be overwritten.

Post #5

why

Ah, that makes a ton of sense, thanks!

Btw, the reason why I’m using the @live_text assign at all (rather than just @query) is that I wanted to be sure that phx-change isn’t somehow locally (via js) updating the value of @query. The data seemed to come back so incredibly quickly from the remote server that I wanted to be double sure… LV is pretty incredible…

Post #6