material-components-web icon indicating copy to clipboard operation
material-components-web copied to clipboard

MDCDialog:accept is not cancelable

Open berets76 opened this issue 7 years ago • 12 comments

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.

image

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

berets76 avatar Sep 18 '17 08:09 berets76

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

grzegorztomasiak avatar Oct 12 '17 21:10 grzegorztomasiak

+1

StupidIncarnate avatar Oct 15 '17 01:10 StupidIncarnate

+1

aaronhudon avatar Oct 17 '17 21:10 aaronhudon

+1

mether avatar Oct 19 '17 01:10 mether

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

ctafield avatar Nov 22 '17 09:11 ctafield

@ctafield mind sharing a snippet of your implementation ?

aaronhudon avatar Feb 15 '18 23:02 aaronhudon

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();
}

Honest-Objections avatar Apr 16 '18 20:04 Honest-Objections

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 !!

lwolle avatar Sep 10 '18 12:09 lwolle

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

peterculak avatar Feb 03 '19 12:02 peterculak

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.

aeromac avatar Mar 10 '19 03:03 aeromac

:+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.

mtomov avatar Jun 22 '20 17:06 mtomov

Is anything happening here? Will the solution from @Honest-Objections be stable?

lborgman avatar Jan 26 '23 01:01 lborgman