fix(overlay): disable pointer events if overlay is detached #2747
Conversation
* Currently the overlay element is still visible if the overlay has been detached. This is problematic if the overlay pane element has an `height | wídth` set from the state, because now the overlay element may block clicks on the page and overlap the actual content. * The issue isn't noticable for the `select` and other overlay components, because those don't specify a `height | width` in their state. Nevertheless the pane elements are still visible, but just have no height and width set. Fixes angular#2739
googlebot
added
the
cla: yes
|
@devversion detach triggers the animations, so hiding it right away would prevent those from running |
devversion
force-pushed
the
fix/overlay-hide-pane-element
branch
from
fb50b3d to
275bd82
Compare
|
@jelbourn Good point - I think another idea is to disable |
devversion
changed the title
| @@ -29,16 +29,25 @@ describe('Overlay directives', () => { | |||
| fixture.detectChanges(); | |||
| }); | |||
|
|
|||
| /** Returns the current open overlay pane element. */ | |||
| function getPaneElement() { | |||
There was a problem hiding this comment.
It may be better to use querySelector here, otherwise the test will break if we changed the DOM order.
There was a problem hiding this comment.
As long as there's a unit test for the behavior it should be okay
There was a problem hiding this comment.
Yeah it shouldn't be necessary. Nevertheless I just changed it (Testing the dismiss review button)
| this.updateSize(); | ||
| this.updateDirection(); | ||
| this.updatePosition(); | ||
|
|
||
| // Enable pointer events for the overlay pane element. | ||
| this._togglePointerEvents(true); |
There was a problem hiding this comment.
Aren't these enabled by default?
There was a problem hiding this comment.
Yeah they are enabled by default. But developers can always call attach after detach has been called. This is necessary to revert the togglePointerEvents(false) from the detach method.
|
Okay that didn't look pretty good 😄 Should be ready for another review. |
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Currently the overlay element is still visible if the overlay has been detached.
This is problematic if the overlay pane element has an
height | wídthset from the state, because now the overlay element may block clicks on the page and overlap the actual content.The issue isn't noticable for the
selectand other overlay components, because those don't specify aheight | widthin their state.Nevertheless the pane elements are still visible, but just have no height and width set.
Fixes #2739