thojanssens1
LiveView: detect a click outside of an element
I display a dropdown menu if the user clicks on some icon.
Any pointers on how to close that dropdown when the user clicks outside of it?
Most Liked
al2o3cr
phx-click-away was added in 0.17 (October 2021) as part of this PR:
https://github.com/phoenixframework/phoenix_live_view/pull/1663
cblavier
I’m reopening this thread as Phoenix.LiveView.JS is now a thing 
Is there any built-in feature in LiveView.JS similar to AlpineJS click outside?
LostKobrakai
I would suggest not using liveview for interactions like opening/closing dropdowns in the first place. liveview is great for interactions, which need to contact the server anyways, but for pure client side interactions it’s better to keep things fast and without latency. The simplest way to do this is currently alpine.js, which can be easily integrated with liveview to not lose its state when liveview issues updates to the markup. Alpine also has examples of doing exactly those “click elsewhere” events you need for dropdowns and similar components.
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Enabling companies to succeed by building software people love.
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.
Real-time error tracking, performance insights, and observability for devs.
Producing high quality Elixir screencasts since 2017.
Enabling companies to succeed by building software people love.
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!"