hoetmaaiers
I am bulding the TailwindCSS combobox as a Phoenix Liveview LiveComponent (What’s with the capitals 
).
When clicking inside the input element, the combobox opens and I can navigate the elements using ArrowUp/Down setting the select item in the LiveComponent’s state. However, the input element stays in focus and the active list item seems to be only artificial.
What I mean with artificial feeling is that when I hit enter, the enter event is taking place on the input element which remain in focus. Another thing which feels wrong is when an element is selected outside of the combobox popover the items is not inside focus and dissapears behind the overflow…
Am I taking a wrong route over here? Should I do this with or without Javascript?
Where Next?
Trending in Questions
Other Trending Topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Supporting innovation across the BEAM ecosystem.
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
- #podcasts-by-brainlid
- #ecto-query
- #ai
- #elixirconf-us
- #blog-post
- #elixir-ls
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #elixirconf-eu
- #metaprogramming
- #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.
Elixir, Erlang & BEAM conferences from Code Sync - join us in 2026!
Practical resources that improve the lives of professional developers.
Producing high quality Elixir screencasts since 2017.
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)
Eiji
I guess you are as confused as I was with
LiveView’s behaviour, see:JohnnyCurran
LiveView will never overwrite an active input’s value even if the client value differs from the LiveView’s rendered value
This portion of the docs is worth a read:
If I were you, I would do all of the client navigation (up, down, etc.) in just JS. when they select an item or hit enter, then send it to the LiveView.
For one, you won’t have the js/liveview source of truth collision. The second is that those server round trips are nice and snappy on local development, but are slower and feel slow once they are deployed to production.
hoetmaaiers
Ok, thank you for the responses. Somehow I felt like 50% of the combobox was already doone and the path with LIveview only felt pretty good. I do understand the snappyness of this kind of interface would suffer from a roundtrip to the server.
For full solution reference, I went the web-components route as described in this topic: Phoenix LiveView + HeadlessUI
Thanks to @fteschke and @superchris for the inspiration.