manualClose doesn't always work in Modal Behavior config

[LTGIV]

Hello,

Thank you for making this plugin.

I've been working on a login modal window in Typescript, and the manualClose parameter doesn't seem to consistently work. What I'm hoping to accomplish is three behaviors for the username and password being entered and the login button is pressed:

1. Successful authentication: the modal window is closed with requestClose().
2. Invalid credentials: content updated in the modal window to include an error message stating this and the user try again.
3. Communications error: the client timed out connecting to the server, or the server gave an invalid response, not indicating pass/fail with authentication.

From reading the documentation and example code, I've tried two ways of keeping the modal window open and have been unable to use the requestClose() attribute of a modal object directly. Only the second way seems to work (thank you for the modal promise flowchart) and allows me to use dialog.emit('modal.requestClose', {abc:123}) from within my CreateDialog function, but then I'm stuck on the problem of not being able to update the content.

1) Dialog with Modal Promise

create() {

    var dialog = CreateDialog(this)
    .setPosition( this.viewport.width/2 , this.viewport.height/2 )
    .layout()
    .modalPromise({

        manualClose: true,
        duration: {
            in: 500,
            out: 500
        }

    })
    .then(function (data) {
        console.log( data );
    })

}

2) Dialog with Modal Promise

import { ModalPromise } from 'phaser3-rex-plugins/plugins/modal.js';

create() {

    var dialog = CreateDialog(this)
    .setPosition( this.viewport.width/2 , this.viewport.height/2 )
    .layout()

    var modal = ModalPromise(dialog, {

        manualClose: true,

        duration: {
            in: 500,
            out: 500,
        }

    })
    .then(function(closeEventData) {
        console.log( closeEventData )
    })

}

Thank you for your time.

[rexrainbow]

Dialog, and ConfirmDialog override sizer.modalPromise method, so user does not have to fire 'modal.requestClose' event under an action button clicking, also the return data is prepared by dialog.

ref

clicking any action button to close this modal dialog.

That's why the behavior of dialog.modalPromise is different from ModalPromise method.

I can try to add a parameter to disable this default behavior of dialog.modalPromise.

[LTGIV]

I can try to add a parameter to disable this default behavior of dialog.modalPromise.

I think that this would make more sense so that people in the same position as I am can build login screen overlays by combining the TextEdit example (here) with Dialog and Modal.

Should I use the second example I posted above, or is there a better way? To quickly update the content as I described, do I have to disable the transition time and keep replacing the dialog modal with a new one?

[rexrainbow]

Add defaultBehavior parameter in dialog.modal(config) , dialog.modalPromise(config) method. Set to false to disable default behavior, which will close modal dialog when clicking any action button. See this demo, enable line 31 (defaultBehavior: false)

NPM package will be upgraded these 2 days.

[LTGIV]

Thanks, Rex; I'll look into that. When I get this seamlessly working, I plan to send a Pull Request for use in the examples directory.

FWIW: I couldn't find a donate link to buy you a coffee and help support your work, and I would like to.

[rexrainbow]

NPM package has been upgraded.