Delete button with confirmation

Learn
1

For an application, I want to add a confirmation dialog to a delete button in order to prevent my users from “oups ! I lost data”.

I want something very basic using native web browser window.confirm.

I came across this post but I’d like to avoid ports and have a web component instead.

If there is no know implementation, I’ll probably do it myself but I want to avoid to duplicate work and rather contribute to existing one.

2

Possibly a better approach than a web component https://ellie-app.com/yKLggjjmLm8a1

3

Beautiful ! I love it.

To sum up:

In Elm view:

button
    [ onClick WhateverMsg, attribute "data-confirm" "Confirm message" ]
    [ text "delete" ]

In HTML app page:

document.addEventListener('click', function(event) {
if (event.target.getAttribute('data-confirm') !== null) {
  const message = event.target.getAttribute('data-confirm') || 'Are you sure?';
  if (!window.confirm(message)) {
    event.stopImmediatePropagation();
    event.preventDefault();
  }
}
4

Oh, what? I had no idea you could do that. Super useful, thanks Wolfadex!

5

Where is that data-confirm attribute on <button> documented? I couldn’t find anything about it on MDN.

6

Data attributes are custom attributes with no defined meaning. The JavaScript code of that Ellie powers it.

7

Shoot, I didn’t even look at the JS in the Ellie – sorry, thanks!