Catching close events of a modal

Hi,

I have a Custom UI bridge modal in my app (Using this one)

I have the view.close() callback I can use to catch the close event of the modal, but it doesn’t catch the close event when closing the modal using esc or clicking outside the modal. How can I handle it beside disabling the esc and clicking outside the modal?

1 Like

Hi @amityahav, are you defining an onClose callback when creating your Modal instance? e.g.

const modal = new Modal({
  resource: 'my-modal-resource',
  onClose: (payload) => {
    console.log('onClose called with', payload);
  },
});

This is the actual callback that will capture the close event, and should be called both when using esc or clicking outside the modal.

However if you are saying that you have defined this callback and it is being called, but just with no payload, then that is intentional behaviour. Hitting esc and clicking outside the modal are considered “cancel” operations and so will not pass a payload. The only way to do this is to call view.close(payload) explicitly from within the modal.

Hi @PeterYu,

I’m aware of the close behavior.
The issue here is that esc or click outside the modal, closing the modal and not entering the onClose callback at all.

Could you show the code where you’re defining your modal? I’ve not managed to replicate the bug. Have you tried adding some log statements to the onClose callback to confirm that it’s not being called?

Hi @PeterYu,

This is how I’m defining the modal:

async function myFunction(index = -1) {
	const modal = new Modal({
		resource: 'my-resource',
		onClose: async (payload) => {
			if (payload) {
				saveItemsInJira(addItem({
					id: generateGuid(),
					index: index !== -1 ? index : props.items.length + 1,
					itemKey: payload.itemKey,
					url: `/browse/${payload.itemKey}`,
					summary: payload.summary,
					itemsCount: payload.itemsCount
				}));
			}
		},
		size: 'xlarge',
		context: {}
	});

	await modal.open();
}

I was able to debug it and confirm that when clicking on esc or clicking outside the modal is closing but it doesn’t go inside the callback.

@amityahav I believe it is because you are checking that payload is truthy before calling saveItemsInJira. If the modal is closed by hitting esc or clicking outside the modal, it is treated as a cancel operation and the payload will be null.