Close and reset a modal

How do I do X?
1

I think this might be a bug (or two), but I wanted to check here before opening a issue on GitHub.

I have a modal.

I have disabled quick dismiss.

Issue 1: users can press escape to close the modal

I have two buttons on the modal that can close it, the ‘X’ in the corner and a cancel button. Both buttons run ‘helpers.closeShipmentModal()’

When that function is written like this:

	closeShipmentModal: () => {
		closeModal('newShipmentModal');
		resetWidget("newShipmentModal",true)
	},

Then the modal is reset, but it does not close.

When the function is written like this:

	closeShipmentModal: () => {
		resetWidget("newShipmentModal",true);
		closeModal('newShipmentModal')
	},

Then the modal hangs for a bit while it resets, then it closes.

I imagine one way of tackling this is dropping the resetWidget from the function and just placing that on the ‘On Close’ event, but it doesn’t make sense why the first way of writing the function (close, then reset) doesn’t work. I even tried using async/await and that didn’t fix it.

2

Hey! Can you try marking your function as async and awaiting those functions?

3

Hi Eric! You can track this bug here: [Bug]-[192]:calling `closeModal` function doesn't work, if done before `resetWidget` · Issue #17487 · appsmithorg/appsmith · GitHub

4

This is the expected behavior. Can you elaborate a bit on this issue? If you want to execute an action when the modal is closed, you can run it in the onClose event of the modal. This way it gets triggered even if the user presses ESC.

image
image1189×771 26 KB

5

We want to control the user experience and not have a user accidentally close a modal when they do not intend to. As such we have specific buttons set up to close the modal and always disable quick dismiss.

If the modal is dismissed prematurely that could result in loss of data when the modal requires the user to input data and that data is not submitted. However incomplete sets of data cannot be submitted, so we cannot save the data to the database on close.

Additionally the modal is contextual based on which button the user presses to show it. For example, we could have 5 orders in a table or a list, and each order has a button to create a shipment. The button pops the same modal, but the modal is populated with data related to the row/list item that it is triggered from.

Pressing escape to close the modal could be done on accident while the user is filling the modal with data (just as clicking outside the modal is an easy mistake to make).

Binding escape to a button makes sense, because then the designer can decide if escape should bind to close modal or some other function.

Barring that, escape should be tied to quick dismiss, so the designer can decide if an easy dismissal is desired (escape or clicking outside) or if they need to make sure the user follows the correct workflow to exit safely.

6

Thank you for this feedback! I’ve taken your message and started a GitHub issue here. Feel free to add any further context as a comment on the issue.