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.
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.
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?
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.
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…