Don't close Dialog(Modal) when click outside in React & HeadlessUI

Question

my problem is simple ... I'm using HeadlessUI's Dialog component for React in my app and when I click out of modal I wish it wouldn't close. In the documentation, there is the Dialog. Overlay parameter that deals with this interaction but there are no settings to disable it.

Any solutions? This is the link to the HeadlessUI docs of the component I am using: https://headlessui.dev/react/dialog

Maybe did u know the kind of "Alert blocking modal" for React??

Answer 1

You can make the onClose event do nothing and instead only close the dialog when a button within it is clicked:

// eslint-disable-next-line @typescript-eslint/no-empty-function
<Dialog open={isOpen} onClose={() => {}}>

Instead, create a close button inside the dialog:

<button onClick={handleClose}>Close</button>

with handleClose defined as:

const handleClose = () => {
  setIsOpen(false);
};