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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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