Custom dialog for data-confirm modal

[ne0-cz]

Hello! I'd like to use a custom dialog for confirmation. In this case the preventDefault in interaction event like the documentation says is not sufficient:

naja.uiHandler.addEventListener('interaction', (event) => {
    if (event.detail.element.hasAttribute('data-confirm')
        && ! window.confirm(event.detail.element.getAttribute('data-confirm'))
    ) {
        event.preventDefault();
    }
});

This works only for the built-in window.confirm - you can't create a custom function which returns after button was clicked.
If I'm gonna use callbacks, I need to start with event.preventDefault() so that the request doesn't happen until a button is clicked and then I'd need to do some kinda of event.doDefault() if the button was "yes" - which doesn't exist...

So, what is the proper way to implement a custom confirmation dialog with Naja?

[jiripudil]

Hi, I'm afraid this is the way it is with the DOM's event system: it's synchronous and it doesn't play well with any kind of asynchronous workflow. So yes, you need to call preventDefault() synchronously and then replay the interaction. A quick-n-dirty solution could look something like this:

naja.uiHandler.addEventListener('interaction', (event) => {
    if (event.detail.element.hasAttribute('data-confirm') && !event.detail.options.bypassConfirmation) {
        event.preventDefault();
        customAsyncConfirmation(event.detail.element.getAttribute('data-confirm'))
            .then(() => {
                naja.uiHandler.clickElement(event.detail.element, {bypassConfirmation: true});
            });
    }
});