Search code examples
reactjsantd

using a Popconfirm from antd to confirm the closing of a modal?

I am trying to use a popconfirm of ant design to confirm the closing of a modal, the following code I get the popconfirm to fire and the modal to close, but the popconfirm stays open.

does anyone have any idea how to make the popconfirm close when it is confirmed by giving it yes ?

import { Modal, Popconfirm } from 'antd';
import { useState } from 'react';

export const Ensayo=()=> {
  const [open, setOpen] = useState(false);
  const [popupOpen, setPopupOpen] = useState(false);

  const showModal = () => {
    setOpen(true);
  };

  const handleCancel = () => {
    setPopupOpen(true);
  };

  const handlePopupConfirm = () => {
    setOpen(false);
    setPopupOpen(false);
  };

  const handlePopupCancel = () => {
    setPopupOpen(false);
  };

  return (
    <div>
      <button type="button" onClick={showModal}>
        Open Modal
      </button>
      <Modal
        title="Basic Modal"
        open={open}
        onCancel={handleCancel}
      >
        <p>Some contents...</p>
        <Popconfirm
          title="Are you sure you want to close this modal?"
          open={popupOpen}
          onConfirm={handlePopupConfirm}
          onCancel={handlePopupCancel}
          okText="Yes"
          cancelText="No"
        />
      </Modal>
    </div>
  );
}

I have tried to add the popupOpen condition as a condition for the popconfirm rendering but it doesn't work with that condition it never triggers the popconfirm.

Solution

  • You can move the <Popconfirm> component outside the <Modal>

    check the following example

    import { Modal, Popconfirm } from "antd";
import { useState } from "react";

export const Ensayo = () => {
  const [open, setOpen] = useState(false);
  const [popupOpen, setPopupOpen] = useState(false);

  const showModal = () => {
    setOpen(true);
  };

  const handleCancel = () => {
    setPopupOpen(true);
  };

  const handlePopupConfirm = () => {
    setOpen(false);
    setPopupOpen(false);
  };

  const handlePopupCancel = () => {
    setPopupOpen(false);
  };

  return (
    <div>
    /* Popconfirm moved here */
      <Popconfirm
        title="Are you sure you want to close this modal?"
        open={popupOpen}
        onConfirm={handlePopupConfirm}
        onCancel={handlePopupCancel}
        okText="Yes"
        cancelText="No"
      />
      <button type="button" onClick={showModal}>
        Open Modal
      </button>
      <Modal title="Basic Modal" open={open} onCancel={handleCancel}>
        <p>Some contents...</p>
      </Modal>
    </div>
  );
};

export default Ensayo;

    Output:

    output