DEV Community

Mykolas Mankevicius
Mykolas Mankevicius

Posted on

Beter data-confirm modals in Phoenix LiveView

TLDR; here's the result

The default experience

I really loved that Phoenix provided a nice plugin for having quick confirm behaviours without needing to do a lot of juggling things. While the behaviour works for testing it's really lacking UX for production use.

And as it turns out it's not really clear how to customise the behaviour, as out of the box it uses window.confirm which awaits the action before continuing on.

So if you want this behaviour you need to implement some sort of preventDefault, but execute after method.

Well you're in luck as today i've finally got around to writing this post.

The setup

First I've generated a phoenix application

mix better_data_confirm --databse sqlite3
Enter fullscreen mode Exit fullscreen mode

Next I've generated a Posts resource so that i could show this behaviour without too much hassle:

 mix Blog Post posts title:string content:string
Enter fullscreen mode Exit fullscreen mode

That will get you to the default behaviour video above

Adding the danger_dialog

Next i've added a dialog element to the lib/better_data_confirm_web/components/layouts/root.html.heex root layout


  <body class="bg-white antialiased">
    <%= @inner_content %>
Enter fullscreen mode Exit fullscreen mode


  <body class="bg-white antialiased">
    <%= @inner_content %>
      class="backdrop:bg-slate-800/75 shadow-xl rounded-md bg-white p-6 border"
      <form method="dialog" class="grid gap-6 place-items-center">
        <h1 class="text-2xl" data-ref="title">
          Are you sure?
        <div class="flex gap-4 items-center justify-end">
          <.button data-ref="cancel" type="submit" value="cancel">
          <.button data-ref="confirm" type="submit" value="confirm" class="bg-red-500">
Enter fullscreen mode Exit fullscreen mode

Now this is up to your design choices and so on, you can have translated string, aria attributes, animations all that jazz, i'll link to a few good posts about that in the end.

But for the basic example it's a simple dialog with some styling and that's all.

Overriding the default behaviour

next in the assets/js/app.js we need to add the overriding behaviour, pop this code at the end of the file.

// Attribute which we use to re-trigger the click event
const CONFIRM_ATTRIBUTE = "data-confirm-fired"

// our dialog from the `root.html.heex`
const DANGER_DIALOG = document.getElementById("danger_dialog");

// Here we override the behaviour
document.body.addEventListener('', function (event) {
  // we prevent the default handling of this by phoenix html

  // grab the target
  const { target: targetButton } = event;
  const title = targetButton.getAttribute("data-confirm");

  // if the target does not have `data-confirm` we simply ignore and continue
  if (!title) { return true; }

  // For re-triggering the click event
  if (targetButton.hasAttribute(CONFIRM_ATTRIBUTE)) {
    return true;

  // We do this since `window.confirm` prevents all execution by default.
  // To recreate this behaviour we `preventDefault` 
  // Then add an attribute which will allow us to re-trigger the click event while skipping the dialog
  targetButton.setAttribute(CONFIRM_ATTRIBUTE, "")

  // Reset the `returnValue` as otherwise on keyboard `Esc` it will simply take the most recent `returnValue`, causing all sorts of issues :D
  DANGER_DIALOG.returnValue = "cancel";

  // We use the title, which is nice we can have translated titles
  DANGER_DIALOG.querySelector("[data-ref='title']").innerText = title;

  // <dialog> is a very cool element and provides a lot of cool things out of the box, like showing the modal in the #top-layer

  // Re-triggering logic
  DANGER_DIALOG.addEventListener('close', ({ target }) => {
    if (target.returnValue === "confirm") {
      // we re-trigger the click event
      // since we have the attribute set. This will just execute the click event;
    } else {
      // Remove the attribute on cancel as otherwise the next click would execute the click event without the dialog
  // once: true, automatically remove the listener after first execution
  }, { once: true })

}, false)
Enter fullscreen mode Exit fullscreen mode

And Voila

You now have a customised modal for data-confirm!
You can add any other things you need!

  • allow customising button texts
  • add a message
  • translate
  • change icons
  • animate the appearance/hiding of the modal
  • have different modal types danger/success/prompt

The sky is the limit...

Read more to create even better ux:

Don't forget to leave a like!

Good luck with your adventures! If you enjoyed the post, likes are very appreciated, even better if you share this :D

Top comments (0)