Is there a way Remove or Overwrite a Modal event handler?

[mathieu-fournier]

Hi o/,

Is there a way to remove/overwrite this event handler found in Modal.tsx ?

Stoppping the event propagation prevents from starting a Selection Area.
Here's a codeSandbox of the selectionArea behaviour.

Thanks (:

[mayank99]

Hi @mathieu-fournier 👋

Could you produce a sandbox showing how you're using the selectionArea in Modal? That handler is meant to stop propagating clicks into the backdrop (parent) which has its own handler for closing the modal. If the selectionArea is inside the modal, it shouldn't be a problem.

[mathieu-fournier]

Hi @mayank99 o/,

I've made a sandbox using the selectionArea in Modal.

Thanks (:

[mayank99]

Thanks for the sandbox. It looks like the problem is happening because the lib you're using is adding a listener to document. https://github.com/Simonwep/selection/blob/v2/src/index.ts#L111

@iTwin/itwinui-react-1 We'll need to think about a good approach to solve this. Either through composition (separating ModalBackdrop and ModalDialog so the user has control over both) or through a prop to disable the auto-close behavior for backdrop clicks.

[mathieu-fournier]

Do you have any clue on a possible workaround I could use to fix this on my side ?

[mayank99]

I can't think of any workaround. I created a PR with quick fix though: #518

[mathieu-fournier]

The PR will do, Thanks a lot (: