[@mantine/modals] update modal props

[u3u]

Updating the modal state is a relatively common requirement, for example, to perform a delete operation when the confirm button is clicked, the loading state of the confirm button needs to be updated and the closing of the modal should be prevented if an error occurs.

const id = modals.openConfirmModal({
  // ...
  closeOnConfirm: false,
  onConfirm: async () => {
    // If you can update the modal:
    modals.updateModal({ id, confirmProps: { loading: true } });
    await deleteUser();
    modals.closeModal(id);
  },
});

Or you can make onConfirm support return promise, automatically handle the loading state, and prevent the modal from closing if it returns reject

const id = modals.openConfirmModal({
  //  ...
  onConfirm: async () => {
    await deleteUser();
  },
});

[BoneTM]

async confirm is good, possible to impl?

[remadyt]

actual, any ideas? how update confirm button props async

[jasperjorna]

Any updates on this for the core? Being able to update the cancel/confirm buttons based on a state (async loading) is a very common use case.

[enchorb]

+1 @rtivital

[NenadRadovanovIzon]

+1

[rtivital]

https://mantine.dev/x/modals/#dynamic-content-and-the-modals-manager

[NenadRadovanovIzon]

Works like a charm, ty.

[ZipengChen1832]

can't pass props for the confirm or cancel button

[arielger]

I can't pass confirmProps when using the modals.updateModal function. Not sure if there is any other way of changing the props dinamically.

I'm trying to implement a very common scenario where I click the confirm button and it shows as loading until the action I'm executing finishes. Any idea on how to solve this?