How To Prevent Modal From Closing

import { ModalDoNotClose } from '@/demos/ModalDoNotClose.demo'; import { Layout } from '@/layout';

export const meta = { title: 'How to prevent Modal from closing?', description: 'Learn how to prevent Modal from closing when the user clicks outside of it or presses the Escape key', slug: 'how-to-prevent-modal-from-closing', category: 'components', tags: ['modal', 'drawer', 'close', 'click outside'], created_at: 'December 1, 2023', last_updated_at: 'December 1, 2023', };

export default Layout(meta);

Modal and Drawer components' opened state is controlled by the opened prop. You can use it to prevent the modal from closing by setting it to true. For example, this can be useful if you have an async operation inside the modal and want to prevent the user from closing it before the operation is finished:

<Demo data={ModalDoNotClose} />