Modal: Can't be closed by clicking above

[martinkrulltott]

Clicking directly above a modal doesn't trigger it to be closed.

As can be seen in this example: https://codesandbox.io/s/ui5-sandbox-j8fhs?file=/src/App.js

The centered-inner-content element seems to be the cause of this.

[Mohammer5]

This isn't really a Q/A issue, right?
It's a bug report, you could just create an issue in Jira.

#234 (comment)

[martinkrulltott]

https://jira.dhis2.org/browse/LIBS-127

[Birkbjo]

Agree that this should be a bug-report. I don't know the implementation details as to why the inner-div is there (seems to be to prevent backdrop-clicks?). @HendrikThePendric, any ideas on how to fix this? A potential solution I played around with was to remove the inner-div completely, but that needed some changes on how to handle backdrop-clicks.

[martinkrulltott]

Maybe even just changing pointer-events: all; to pointer-events: none; would be enough?

[Birkbjo]

That would result in onClose be called when clicked on the modal as well. Seems like that is the sole purpose of the inner-div - to prevent that from happening,

[martinkrulltott]

yes, that's right, the first child (aside) would need the pointer-events: all; then to prevent the closing when the modal content is clicked.

[varl]

https://jira.dhis2.org/browse/LIBS-127

Thanks for reporting this issue, @martinkrulltott. I'm copying it out to a "new answer" so we can mark it as the answer. It will be fixed.

[KaiVandivier]

Fixed in UI v6.5.1 👍