Material-components-web: MDCDialog:accept is not cancelable

[berets76]

I need to post some data from the dialog and if server side validation fails, I need to "reload" dialog content with errors.

The problem is that each "click" on the dialog (buttons, anchor tags, etc..) close it, and I need to re-open, generating an ugly flickering effect.

I thought to intercept 'MDCDialog:accept' event and cancel it preventing the dialog from closing, but accept event is not cancelable.

Is there a way to keep open the dialog on accept click ?

[grzegorztomasiak]

anyone on this? I also don't know how to prevent the dialog box from closing.

[StupidIncarnate]

+1

[aaronhudon]

+1

[mether]

+1

[ctafield]

I ended up using my own buttons, and then calling close() on the dialog manually.

[aaronhudon]

@ctafield mind sharing a snippet of your implementation ?

[Honest-Objections]

Remove mdc-dialog__footer__button--accept from the buttons:

<footer class="mdc-dialog__footer">
      <button type="button" id="dialog-cancel" class="mdc-button mdc-dialog__footer__button">@yield('button_left', 'Cancel')</button>
      <button type="button" id="dialog-confirm" class="mdc-button mdc-dialog__footer__button">@yield('button_right', 'Submit')</button>
</footer>

Then when you initialise, add onclicks:

const dialogElement = document.querySelector('#my-mdc-dialog');
const dialog = new MDCDialog(dialogElement);

dialog.show();

dialogElement.querySelector('#dialog-cancel').onclick = function () {
    // Add your cancel logic here
    dialog.close();
}
dialogElement.querySelector('#dialog-confirm').onclick = function () {
    // Add your cancel logic here
    dialog.close();
}

[lwolle]

Hey folks,
is this issue currently being worked on? Any thoughts? From my point of view, it is crucial to control the behaviour of the dialog without hacking around the intended behaviour. Is the behaviour "close dialog on pressing accept" intended, and if yes: why is this ?

Thanks for this nice library !!

[peterculak]

I ended up extending MDCDialog, MDCDialogFoundation and Adapter classes injecting my own submitHandler which when it's present then dialog wont close on submit but only when submitHandler returns promise that resolves ... it stays open and shows error when it's a submission failure.
It would be nice if this was all included in MDCDialog and i didn't have to extend it and then maintain the extended code myself

[aeromac]

Not being cancelable makes validating dialog content impossible - eg a login dialog or anything that takes user input. Of course, it's easy enough to get around - but I think this should be a requirement of a dialog.

[mtomov]

:+1: Yeah, exactly! Thank you!

Not being cancelable makes validating dialog content impossible - eg a login dialog or anything that takes user input. Of course, it's easy enough to get around - but I think this should be a requirement of a dialog.