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
Where Next?
Trending in Questions
Other Trending Topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Develop your skills with books, videos, and courses.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #blog-post
- #phoenix_html
- #iex
- #graphql
- #ai
- #genstage
- #elixirconf-us
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #security
- #hex
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Practical resources that improve the lives of professional developers.
Develop your skills with books, videos, and courses.
Bringing learning, work and compliance together since 1987.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
First 8 of 8 Posts
benwilson512
Hi @why you need to be capturing the form state via
phx-changeif 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.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?benwilson512
Oh sorry I missed that. Your issue is that the you’re binding
type_live’s text tolive_textbut in the input type you dovalue="<%= @query %>". The assign used in the input should match the assign you’re storing the text in.why
Cool, that fixed it! Thanks
I now have:
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?
benwilson512
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.
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…
benwilson512
Yeah it’s crazy stupid fast.
why