2 modals opened when i only click on 1 button

[starxyn]

Hi,

I have a main component containing the following 2 table components:

<CurrentListing />
<PastListing />

Each component above has a deletion button to delete data. The deletion button opens a modal that asks user if they wish to delete the data.

const openDeleteModal = (row: MRT_Row<type1>) => 
  modals.openConfirmModal({
     modalId: 'first-modal',
     title: (<Text>Deletion</Text>),
     children: <Text>Are you sure you want to delete?</Text>,
     labels: { confirm: 'Delete', cancel: 'red'},
     confirmProps: { color: ''red' },
     onConfirm: () => handleRowDelete(row),
   });
.
.
.
Using mantine react table, I applied deletion button on each row of data.
renderRowActions: ({row}) => (
<ActionIcon onClick={() => openDeleteModal(row)} title='Delete button'><IconTrash /></ActionIcon>)
.
.
.
return (
<ModalsProvider></ModalsProvider>
)

However the problem is when I click on delete icon on either CurrentListing or PastListing data, the other deletion modal will also show up, resulting in 2 deletion modals overlaying each other. Meaning if I were to close the deletion modal, I still have to close the other modal hidden behind. I even made the modalId different but it does not work. It happens when 2 ModalsProvider were provided. How do I ensure only 1 modal shows up each time?

[starxyn]

I realized the root cause is having both <CurrentListing/> and <PastListing/> return each ModalsProvider in the return statement. I can only use 1 ModalsProvider for the main component containing these child components <CurrentListing/> and <PastListing/>.

Is there any documentation to refer to that detail the correct implementation of such modal in this scenario? So far I only refer to https://mantine.dev/x/modals/

[rtivital]

You must always have one ModalsProvider in your application. Wrap the entire app with it and there won't be any issues.