[React][Dialog] Disable outside click to close Dialog

[mvandoff]

It would be great if there was a prop to disable closing the Dialog on outside click. This can be implemented currently by passing an empty function to the onClose prop, but consequently losing the Escape key functionality. So that solution is essentially a hack.

This thread shows a demand for the feature:
#621

Other solutions listed there like capturing the click and stopping the propagation, don't seem to work, presumably because of the deprecation of Dialog.Overlay?

Briefly looking through the code, it seems like it would be simple to toggle the call to useOutsideClick.

[AnnaYuS]

Great idea! It really seems like this behaviour has to be optional. We have forms inside dialogs, so it can be frustrating when users click outside accidentally and lose all the information they filled in.

[RobinMalfait]

Hey all!

What would be a use case where you want to keep the esc functionality but not the outside click functionality?
Ideally all functionality can be achieved via the mouse and/or via the keyboard so that all your users can do the same kinds of actions.

Right now, the Dialog is a controlled component, so something like this should already work for your use case @AnnaYuS:

let [open, setOpen] = useState(false);

// ...

<Dialog
  onClose={() => {
    // Whatever check is necessary to know it is safe to close the Dialog.
    if (formHasPendingChanges) {
    
      if (window.confirm('You have unsaved changes. Are you sure?')) {
        setOpen(false); // Close it anyway
      }
    
    } else {
      setOpen(false); // Close
    }
  }}
>
 ...
</Dialog>

[mvandoff]

@RobinMalfait I prefer to just have a close button which enables full functionality with the mouse. Clicking outside to close just doesn't feel right sometimes.

[AnnaYuS]

@RobinMalfait Our second option to deal with accidental closing was adding a save prompt just like you suggested, and we decided to go with it. But it feels like a prop would be a more straightforward solution.