Ability to disable auto close when clicking outside a dialog

[jthannah]

I'd like the ability to configure when the close event is fired. Currently it fires automatically when a click is detected outside of the dialog component. Generally, this is fine however, I've come across a use case where it's causing issues.

I'm rendering a TinyMCE editor inside of a dialog. TinyMCE puts all of it's dropdown/popup html at the root of the document so when trying to click on something inside the TinyMCE editor dropdowns, the Dialog auto closes which is not ideal.

Here is a simple example: https://codesandbox.io/s/68tcn

Click on 'Open Menu', then try to make a selection in the 'Paragraph' dropdown. You'll notice the whole dialog closes.

[agcty]

that would be incredibly helpful!

[DanielBailey-web]

You can just add an event listener to it that does the following:

function mousedown(e: Event) {
      e.stopImmediatePropagation();
      e.stopPropagation();
      e.preventDefault();
    }
elementIWantToClickOn.addEventListener("mousedown", mousedown)

(at least in React you can, but I assume they use eventListeners in Vue as well since that is a JS thing not a React thing)