Would an option for a JS confirmation dialog on closing a modal be useful?

mxgrn · December 17, 2023, 9:59am

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

rhcarvalho · December 17, 2023, 11:52am

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?

mxgrn · December 18, 2023, 2:26am

Hey Rodolfo, thanks for the pointers, wasn’t aware of a similar discussion ongoing!

I suggest keeping things as simple and decoupled as possible, by enabling the modal to warn on close when requested. The rest of the logic should go elsewhere, as I showed in my gist.

arcanemachine · December 18, 2023, 6:45am

I’ve made this before:

github.com

arcanemachine/phoenix-quiz-game/blob/master/assets/js/base/hooks.ts#L32


      
              this.el.dispatchEvent(new CustomEvent("destroyed"));
            }
            disconnected() {
              this.el.dispatchEvent(new CustomEvent("disconnected"));
            }
            reconnected() {
              this.el.dispatchEvent(new CustomEvent("reconnected"));
            }
          }
          
          class SimpleForm extends Hook {
            /**
             * If a form has been modified and the user is attempting to exit the page,
             * then show a warning before exiting the page. This is intended to prevent
             * the form data from being lost during unintentional navigation before the
             * form has been submitted.
             *
             * TO-DO:
             *   - add 'data-confirm' attribute to all other links when shouldWarnOnExit()
             *     evaluates to true, and remove the attribute when it evaluates to false
             */

github.com

arcanemachine/phoenix-quiz-game/blob/master/lib/quiz_game_web/core/components.ex#L1164


      
            default: "change",
            doc: "warns the user when navigating away from a changed form"
          
          attr :rest, :global,
            include: ~w(autocomplete name rel action enctype method novalidate target multipart),
            doc: "the arbitrary HTML attributes to apply to the form tag"
          
          slot :inner_block, required: true
          slot :actions, doc: "the slots for form actions, such as a submit button"
          
          def simple_form(assigns) do
            ~H"""
            <.form
              :let={f}
              phx-hook="SimpleForm"
              id={@id}
              for={@for}
              as={@as}
              class={[
                (@class && String.contains?(@class, "max-w-")) || "max-w-sm",
                "w-full mt-4 mx-auto transition-colors duration-300 rounded-lg",

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.