Problem closing a modal window when clicking the OK button

marceros · Post by **marceros** » Sat Aug 26, 2023 7:36 am

Hello!

I'm developing an addon that opens a settings window where I can configurate things like the background color of another window that will be open later.

The settings window has a button that opens a modal window (called dlgColorPicker) that has a color picker tool, a OK button and a Cancel button so I can choose a color and click OK.

Code: Select all

<head>
	<title>Dance Floor Display</title>
	<script src="file:///mminit.js"></script>
	<script src="dlgColorPicker.js"></script>
	<script src="file:///controls/button.js"></script>
	<script src="file:///controls/colorPicker.js"></script>

</head>


<body data-posSaveName='dlgColorPicker' data-defaultSize='400,400'>

	<div id="id_colorPicker" data-control-class="ColorPicker" data-id="colorPicker"></div>


	<section style="height: 30%; color: red; text-align: center; background-color: green">
		<div data-control-class="Buttons">
			<div data-id="btnOK">OK</div>
			<div data-id="btnCancel">Cancel</div>
		</div>
	</section>


</body>

</html>

Following is the code for the dlgColorPicker.js:

Code: Select all

UI = null;
gl_this = this;
var gl_mainWindow = app.dialogs.getMainWindow();

function init(params) {
	UI = getAllUIElements();
}

app.listen(qid('btnOK'), 'click', event_OK);
async function event_OK(event) {

	console.log('Color accepted');

	gl_mainWindow._window.gl_backgroundColor = UI.colorPicker.controlClass.value;


	gl_mainWindow._window.myEvent_changeBackgroundColor = createNewCustomEvent('changeBackgroundColor', {
		detail: {
			newBackgroundColor: UI.colorPicker.controlClass.value
		}
	});
	gl_mainWindow._window.dispatchEvent(gl_mainWindow._window.myEvent_changeBackgroundColor)

	console.log('OK')
	gl_this.close();
}

The problem is that when I click the OK, the dlgColorPicker window closes but there's no way to use the mouse - within MM - again - the whole MM seems to get stuck.

I guess I shouldn't close the window using the "gl_this.close()" line but I don't know another way.

Thanks,
Marcelo

marceros · Post by **marceros** » Sat Aug 26, 2023 11:23 am

I think I managed to find the solution.

I looked at the OK button of the About dialog and changed my code according to the following code that is inside the init function of the About dialog:

Code: Select all

    window.localListen(qid('btnOK'), 'click', function () {
        closeWindow();
    });

After I moved the listen function to inide the init function, I switched the listen by window.localListen, I switched the close by the closeWindow, my code now looks like:

Code: Select all

function init(params) {
	UI = getAllUIElements();
   
	window.localListen(qid('btnOK'), 'click', function () {

		console.log('Color accepted');

		gl_mainWindow._window.gl_backgroundColor = UI.colorPicker.controlClass.value;

		gl_mainWindow._window.myEvent_changeBackgroundColor = createNewCustomEvent('changeBackgroundColor', {
			detail: {
				newBackgroundColor: UI.colorPicker.controlClass.value
			}
		});
		gl_mainWindow._window.dispatchEvent(gl_mainWindow._window.myEvent_changeBackgroundColor)

		console.log('OK')

		// gl_this.close();

		closeWindow();
	})
}

I'd like to understand which of my changes are important and why.

Thank you in advance,
Marcelo

MiPi · Post by **MiPi** » Tue Aug 29, 2023 2:46 am

Hello.
You should call your initialization inside init function of dialog, this function is called when window is completely loaded and prepared and all standard functions and elements are accessible.
Then you should use window.localListen instead of app.listen. MM sometimes reuses old hidden browser windows for new dialogs (a lot faster then creating always new window), closing dialog cleans window contents and during reopening it prepares new content and then calls init function. In case you would use app.listen, the listener is sometimes not removed during closing, and this can cause instabilities and problems later (it was not case in this situation, all controls like buttons automatically unlisten all listeners bound to them during their cleanup). Listeners created using window.localListen are always removed automatically during closing dialog, so it is more reliable for all situations, not dependent on other cleanup functions.

Anyway your main problem was caused by calling window.close(), this closes browser window, but does not clean "modal state" in MM app, so the main window remains inaccessible. For closing modal windows use closeWindow or assign value to modalResult, this will close window automatically too. Anyway thanks for reporting, we will look at it, so even window.close() will work, I think it worked in the past.

marceros · Post by **marceros** » Tue Aug 29, 2023 10:26 am

Thank you for the explanation. Everything is clear now.

Problem closing a modal window when clicking the OK button

Problem closing a modal window when clicking the OK button

Re: Problem closing a modal window when clicking the OK button

Re: Problem closing a modal window when clicking the OK button

Re: Problem closing a modal window when clicking the OK button