DaAnalyst
Liveview failing to update on window losing focus
Has anyone noticed that upon handling a phx-blur event on input text element as a result of the browser window losing focus, LiveView fails to update the field? The handle_event is processed, but the DOM is simply not updated.
To repeat this bug, have a number of input fields without the form’s phx-change event and have each input text with the blur event. Have the the values obtained in the handle_event function upcased before changing the state (so that all input elements caps the text when losing focus). When focus is lost by clicking or by pressing tab key in the same window, all is well but the field that has focus when another window is activated will not be updated by LiveView. If using pubsub and another browser window to view changes, the I-believe-is-a-bug will become all the more obvious.
I am running Elixir 1.9.0, Phoenix 1.14.11, LiveView 0.4.1 on Windows.
TIA
Most Liked
lardcanoe
Apologies for posting to an ancient question, but I also had this problem and eventually found this note:
For any given input with focus, LiveView will never overwrite the input’s current value, even if it deviates from the server’s rendered updates. This works well for updates where major side effects are not expected, such as form validation errors, or additive UX around the user’s input values as they fill out a form.
Felt I should share for others stumbling on this.
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Move fast and fix things! Error tracking with less noise for Elixir devs who love to ship. Start your free dev account.
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
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance
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 for Elixir devs who love to ship. Start your free account.
Practical resources that improve the lives of professional developers.
Develop your skills with books, videos, and courses.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"