Topic: MDBModal constantly opens and closes if displayed at first render of a component

clickstudioltd priority asked 10 months ago


MDBModal keeps opening and closing when it is displayed at first render.

import React, { useEffect, useState } from 'react';
import {
  MDBBtn,
  MDBModal,
  MDBModalDialog,
  MDBModalContent,
  MDBModalHeader,
  MDBModalTitle,
  MDBModalBody,
  MDBModalFooter,
} from 'mdb-react-ui-kit';

export default function App() {
  const [centredModal, setCentredModal] = useState(false);

  useEffect(() => {
    setCentredModal(true); // displaying the modal here causes problems
  }, []);

  return <>
      <MDBModal tabIndex='-1' show={centredModal} setShow={setCentredModal}>
        <MDBModalDialog centered>
          <MDBModalContent>
            <MDBModalHeader>
              <MDBModalTitle>Modal title</MDBModalTitle>
              <MDBBtn className='btn-close' color='none' onClick={() => setCentredModal(false)}></MDBBtn>
            </MDBModalHeader>
            <MDBModalBody>
              <p>
                Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
                egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
              </p>
            </MDBModalBody>
            <MDBModalFooter>
              <MDBBtn color='secondary' onClick={() => setCentredModal(false)}>
                Close
              </MDBBtn>
              <MDBBtn>Save changes</MDBBtn>
            </MDBModalFooter>
          </MDBModalContent>
        </MDBModalDialog>
      </MDBModal>
  </>;
}

bmurphy premium answered 1 month ago


Edit: This issue is fixed as of the latest version (8.0.0). The modal prop schema has changed since 6.3.0 though, so be aware of that.

Hello:

Do we have any updates to this? I am running into this issue on 6.3.0. If it has been fixed, what version was it patched?

It also happens if you move the code to a componentDidUpdate/useEffect block. Currently the only workaround is to use a setTimeout.


Abdulaziz Al-Homaid premium answered 6 months ago


Hi, I face the same issue


Mateusz Lazaru staff answered 10 months ago


Thanks for reporting this issue. We will fix it soon.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: MDB5 6.1.0
  • Device: PC
  • Browser: Mozilla Firefox
  • OS: Windows 10
  • Provided sample code: Yes
  • Provided link: No