solop
Hi 
I am working on an input in a form with a custom autocomplete dropdown. I would like to realize it without a lot (or any) JS. I managed to create a working component, using phx-keydown events on the input. When keys like arrows, enter etc are pressed the autocomplete element is updated or the selected suggestion applied.
I am quite confused why it says in the docs that phx-keydown is not supported on inputs. The alternatives, installing a key listener on the window etc won’t work because I need to know in which element the keypresses originated. The other suggestion, to use phx-change also can’t support a UI like this, because I will get events when the content of the input changes but not when the user presses some arrow keys.
Does anyone know what “not supported” means here and why?
Where Next?
Trending in Discussions
Other Trending Topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Bringing learning, work and compliance together since 1987.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #library
- #deployment
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #elixirconf
- #channels
- #exunit
- #discussion
- #code-sync
- #podcasts
- #javascript
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #ai
- #podcasts-by-brainlid
- #ecto-query
- #blog-post
- #elixirconf-us
- #elixir-ls
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #elixirconf-eu
- #api
- #forms
- #security
- #metaprogramming
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.
Bringing learning, work and compliance together since 1987.
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!"
Showing Posts 1 to 3- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
solop
Tagging @josevalim because you added this note to the docs ( Improve container and phx-key docs · phoenixframework/phoenix_live_view@d485326 · GitHub )
andreaseriksson
Not a direct answer but the current element in the input is
document.activeElementwhen you typei-n-g-m-a-r
It means phx-keydown on an input field silently “disables” form level phx-change.
You can still use it but you’d have to propagate form level change events yourself.
For example using phx-blur which only gives you field params in your liveview.
If you want form params then you’d need to roll your own or manipulate some (hidden) field and…