mxgrn
Would an option for a JS confirmation dialog on closing a modal be useful?
As one edits a Phoenix LiveView form in a modal, it’s very easy to accidentally press ‘Esc’ and lose all the edits.
Similar to data-confirm for links, I’d like to suggest a new modal attr (close_confirm?) that would accept the confirmation message to be displayed in a JS confirmation dialog on an attempt to close a modal.
I’d be willing to submit a PR if it looks useful. My POC implementation (along with possible usage) is in this gist: LiveView modal close confirmation on dirty form · GitHub
Most Liked
arcanemachine
I’ve made this before:
https://github.com/arcanemachine/phoenix-quiz-game/blob/master/assets/js/base/hooks.ts#L32
It works in live and dead views. IIRC it may not work with all form elements (maybe radio buttons? I don’t remember).
If you want a demo, check out:
The login form is the easiest way to try it out, but if you make an account, then a quiz, then create/edit a question, then you can see it in action in a live view popup.
EDIT: There’s some Alpine.js mixed in there (Escape key functionality) but you should be able to add it to the hook with minimal hassle if you know what you’re doing.
rhcarvalho
Hi Max! I find that indeed interesting. Have you seen what ArthurClemens has recently done at Modal component in CoreComponents closes when clicked outside, may result in data loss · Issue #5660 · phoenixframework/phoenix · GitHub and Add opt-in modal behaviour to dialogs by ArthurClemens · Pull Request #5661 · phoenixframework/phoenix · GitHub?
Popular in Proposals: Ideas
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Catch errors, track performance, monitor hosts and more.
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.
Producing high quality Elixir screencasts since 2017.
Enabling companies to succeed by building software people love.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"