ComposedModal - Letting onClose called with the event object

[zbeedatm]

Summary

Letting onClose called with the event object of ComposedModl, will allow to inspect event.target to detect if it's from click-outside or by clicking on the "x" button to close that modal.

Justification

Need to prevent closing Modal (ComposedModal in my case) when clicking with the mouse outside the popup screen.

Desired UX and success metrics

I need to prevent closing Modal (ComposedModal in my case) when clicking with the mouse outside the popup screen.

"Must have" functionality

Specific timeline issues / requests

Available extra resources

[zbeedatm]

Thanks for the fix. Is it part of a new release already?

[asudoh]

I suppose not, but stay tuned for: https://github.com/carbon-design-system/carbon/releases

[zbeedatm]

Hi,
I updated to 10.7.4 (which includes #4622) and used:
onClose = { e => this.closeImportProjectModal(e)}

closeImportProjectModal(e) { if (e) { console.log(e.target) }

Currently behavior, if I press on the Cancel button of Modal footer e.target is populated.
But when pressing on the "X" button or clicking with the mouse outside, (e) event is undefined!

How can I distinguish between them? Am I missing something?

[asudoh]

Do you have a reduced case based on https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/react/examples/codesandbox?

[zbeedatm]

reduced in : https://codesandbox.io/s/fragrant-morning-267l5
(The import project modal)

[asudoh]

Opening https://codesandbox.io/s/fragrant-morning-267l5, clicking Import button and clicking somewhere outside, I see that modal shows something like <div height="500" role="presentation" class="bx--modal" tabindex="-1"> in Chrome DevTools console.

[zbeedatm]

I captured the screen, I don't get any div when clicking outside!
PSB this video:
https://drive.google.com/drive/u/0/folders/1XCDEFE03nWzLyksdUcbfm2OAcP5GAJbI

[asudoh]

Seems that the fix is not in v10.7.4 code whereas it's in master. Sorry and stay tuned for an upcoming release!