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

clickstudioltd priority asked 1 year 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 5 months 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 10 months ago


Hi, I face the same issue


Mateusz Lazaru staff answered 1 year 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