Within a card displaying an order, there is a sweetalert2 popup that opens when trying to cancel the order, asking for a cancellation reason. This feature works seamlessly on the orders screen. https://i.sstatic.net/RWhOA.png
<Grid item md={8} sm={12}>
orders.map((order) => <SupplierOrderBlock data={order} />)
</Grid>
When attempting to cancel an order, two sweetalerts are triggered. The first prompts the user to enter a reason, and if left blank, the second alert insists on providing a reason before cancelling.
const cancelOrder = (orderID, status) => {
Swal.fire({
title: "Are You Sure You Want to Cancel Order",
text: "Please Enter the reason for the cancellation of order",
input: "text",
showCancelButton: true,
confirmButtonColor: "#1c8fec",
cancelButtonColor: "#fa013b",
customClass: 'swal-wide'
}).then((result) => {
if (result.value == '') {
swal({
title: "You can not cancel without giving a reason",
showCancelButton: true,
confirmButtonColor: "#1c8fec",
cancelButtonColor: "#fa013b",
buttons: {
Confirm: { text: "Okay", className: "okayButton" },
},
});
}
else if (result.isConfirmed) { //cancel order}
This functionality operates smoothly. Now, when using the same component within a Material UI modal in my dashboard, I encounter an issue where text cannot be entered.
<Modal
open={modal}
onClose={handleClose}
aria-labelledby="simple-modal-title"
aria-describedby="simple-modal-description"
style={{ width: "60%", zIndex: 1, marginLeft: '-10%' }}
>
<Box style={{ marginLeft: "50%", marginTop: "25vh", width: "100%", position: 'absolute' }}>
<SupplierOrderBlock data={supplierorder} />
</Box>
</Modal>
https://i.sstatic.net/P3jJt.png
If I remove the Z-index property from the Modal, the sweetalert goes behind the modal https://i.sstatic.net/n9ZV7.png
However, upon closing the modal, it allows users to enter a reason https://i.sstatic.net/rap2j.png