fix(menu): accidentally tapping on sub-menu content that overlaps trigger on touch devices #14538
+11
−7
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…gger on touch devices We depend on the `mouseenter` event to switch between sub-menus, both on touch and mouse devices. Since `mouseenter` is emulated on touch devices, it fires much earlier in the event chain which means that the sub-menu can be shown before the user has lifted their finger. This can be an issue if the sub-menu overlaps the trigger in which case a click will be triggered on the content. These changes fix the issue by re-using an earlier fix that blocks interactions with the panel while it's animating. Note: an alternate approach can be to do something something similar to what we did with the ripples where we block `mouseenter` for a period after the last `touchstart` event. The problem of doing so is that it'll block all `mouseenter` events on touch devices which we depend on to toggle the panel when switching from one sub-menu to another.
googlebot
added
the
cla: yes
jelbourn
added
pr: lgtm
action: merge
josephperrott
pushed a commit
to josephperrott/components
that referenced
this pull request
Jan 14, 2019
…gger on touch devices (angular#14538) We depend on the `mouseenter` event to switch between sub-menus, both on touch and mouse devices. Since `mouseenter` is emulated on touch devices, it fires much earlier in the event chain which means that the sub-menu can be shown before the user has lifted their finger. This can be an issue if the sub-menu overlaps the trigger in which case a click will be triggered on the content. These changes fix the issue by re-using an earlier fix that blocks interactions with the panel while it's animating. Note: an alternate approach can be to do something something similar to what we did with the ripples where we block `mouseenter` for a period after the last `touchstart` event. The problem of doing so is that it'll block all `mouseenter` events on touch devices which we depend on to toggle the panel when switching from one sub-menu to another.
|
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. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
We depend on the
mouseenterevent to switch between sub-menus, both on touch and mouse devices. Sincemouseenteris emulated on touch devices, it fires much earlier in the event chain which means that the sub-menu can be shown before the user has lifted their finger. This can be an issue if the sub-menu overlaps the trigger in which case a click will be triggered on the content. These changes fix the issue by re-using an earlier fix that blocks interactions with the panel while it's animating.Note: an alternate approach can be to do something something similar to what we did with the ripples where we block
mouseenterfor a period after the lasttouchstartevent. The problem of doing so is that it'll block allmouseenterevents on touch devices which we depend on to toggle the panel when switching from one sub-menu to another.