Bug: child elements of a hidden modal can overlay other content and be interacted with

[dlavrenuek]

Right now a closed modal is hidden in the UI with opacity: 0 and pointer-events: none. While this seems to hide the modal and make it's children unreachable for user interaction, the modal is still in the middle of the page and some interaction is still possible. I have discovered that the resize element of a textarea overlays all other content and can be interacted with.

Setting visibility: hidden on a modal's first .container and visibility: visible on .container.open seems to fix the problem.

Tested on MacOS Chrome 96

[alexandertrefz]

I can not reproduce this behaviour with a type="multiline" cm-textfield. Are you using vanilla textareas?

[alexandertrefz]

The proposed visibility fix creates various visual bugs around the animation that shows the modal, for example the button labels sometimes popping in only after the animation finishes.

If you are using vanilla textareas I would recommend to switch to cm-textfield.

[dlavrenuek]

We are using CmTextfield with multiline

[alexandertrefz]

I have found a way of reproducing this now, but the visibility fix is totally unviable. In addition to the visual issues it breaks the auto focus for form fields. I will have a further look into potential solutions, but it seems a rather small issue, for the moment. Bigger changes are on the horizon for common-ui, this may go unfixed until then, unless we can find a practical solution that doesnt require a bigger rework for the modal.