Modal (CModal) Closing Unexpectedly

[othmandori]

• Operating system: macOS BigSur
• Browser: Chrome
• package.json:

{
    "name": "@coreui/coreui-free-react-admin-template",
    "version": "4.5.0",
    "description": "CoreUI Free React Admin Template",
    "homepage": ".",
    "bugs": {
      "url": "https://github.com/coreui/coreui-free-react-admin-template/issues"
    },
    "repository": {
      "type": "git",
      "url": "git@github.com:coreui/coreui-free-react-admin-template.git"
    },
    "license": "MIT",
    "author": "The CoreUI Team (https://github.com/orgs/coreui/people)",
    "scripts": {
      "build": "react-scripts build",
      "eject": "react-scripts eject",
      "lint": "eslint \"src/**/*.js\"",
      "start": "react-scripts start",
      "test": "react-scripts test",
      "test:cov": "npm test -- --coverage --watchAll=false",
      "test:debug": "react-scripts --inspect-brk test --runInBand"
    },
    "dependencies": {
      "@coreui/chartjs": "^3.1.1",
      "@coreui/coreui": "^4.2.6",
      "@coreui/icons": "^3.0.1",
      "@coreui/icons-react": "^2.1.0",
      "@coreui/react": "^4.6.0",
      "@coreui/react-chartjs": "^2.1.2",
      "@coreui/utils": "^2.0.1",
      "chart.js": "^3.9.1",
      "classnames": "^2.3.2",
      "core-js": "^3.29.0",
      "prop-types": "^15.8.1",
      "react": "^18.2.0",
      "react-app-polyfill": "^3.0.0",
      "react-dom": "^18.2.0",
      "react-redux": "^8.0.5",
      "react-router-dom": "^6.8.2",
      "redux": "4.2.1",
      "simplebar-react": "^2.4.3"
    },
    "devDependencies": {
      "@testing-library/jest-dom": "^5.16.5",
      "@testing-library/react": "^14.0.0",
      "@testing-library/user-event": "^14.4.3",
      "eslint-config-prettier": "^8.7.0",
      "eslint-plugin-prettier": "^4.2.1",
      "prettier": "2.8.4",
      "react-scripts": "5.0.1",
      "sass": "^1.58.3",
      "web-vitals": "^3.1.1"
    },
    "engines": {
      "node": ">=10",
      "npm": ">=6"
    }
  }

Bug Description

When Having More Than 1 Modal Opened (Example: Modal(A) That Will Open Another Modal(B)). If You Close Modal(B), then All Modals Will Close (A & B) ... Rather It Should Close Only Modal(B) And Keeps Modal(A) Opened. The Close Function Of CModal Is Unable to Deduct Which Modal Is The Last Modal To Close.

Also This is Happing on CPopover Too (If Existed In CModal) If You Clicked On the popover The Modal Will Close Too !!

Here is a sample Code:

import React, { useState } from 'react';
import { CButton, CModal, CModalBody, CModalFooter, CModalHeader, CModalTitle, CPopover } from '@coreui/react';

const Dashboard = () => {
  const [visibleA, setVisibleA] = useState(false);
  const [visibleB, setVisibleB] = useState(false);

  return (
    <>
      <CButton onClick={() => setVisibleA(!visibleA)}>Launch demo modal (A)</CButton>
      <CModal alignment="center" visible={visibleA} onClose={() => setVisibleA(false)}>
        <CModalHeader>
          <CModalTitle>Modal title (A)</CModalTitle>
        </CModalHeader>
        <CModalBody>
          <h5>Popover in a modal (A)</h5>
          <p>
            This
            <CPopover title="Popover title" content="Popover body content is set in this property.">
              <CButton>button</CButton>
            </CPopover> triggers a popover on click.
          </p>

          {/* Modal (B) Starts  */}
          <CButton onClick={() => setVisibleB(!visibleB)}>Launch demo modal (B)</CButton>
          <CModal alignment="center" visible={visibleB} onClose={() => setVisibleB(false)}>
            <CModalHeader>
              <CModalTitle>Modal title (B)</CModalTitle>
            </CModalHeader>
            <CModalBody>
              <h5>Popover in a modal (B)</h5>
              <p>
                This
                <CPopover title="Popover title" content="Popover body content is set in this property.">
                  <CButton>button</CButton>
                </CPopover> triggers a popover on click.
              </p>
            </CModalBody>
            <CModalFooter>
              <CButton color="secondary" onClick={() => setVisibleB(false)}>
                Close
              </CButton>
              <CButton color="primary">Save changes</CButton>
            </CModalFooter>
          </CModal>
          {/* Modal (B) Ends */}

        </CModalBody>
        <CModalFooter>
          <CButton color="secondary" onClick={() => setVisibleA(false)}>
            Close
          </CButton>
          <CButton color="primary">Save changes</CButton>
        </CModalFooter>
      </CModal>
    </>)

}

Thanks

[othmandori]

@mrholek, Can You please help.

[mrholek]

@othmandori modal is automatically close if a click outside is detected. Please add backdrop="static" to <CModal> to prevent it.

[othmandori]

Thanks For the Reply @mrholek , I'm aware Of the backdrop="static" But This Will prevent closing the modal if clicked Outside, But In The Previous Version 4.1.0 This was working fine... the outside click will close only the last opened modal only without the backdrop="static", So I can still benefit from closing the modal with outside click without conflicting with the other modals Please Check The Gif Below This is Using Version 4.1.0

thanks

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions