Nested menu a little bit shifted when it's opened while its parent is finishing open animation

[julianobrasil]

Bug, feature request, or proposal:

not really a bug 😺

What is the expected behavior?

When a nested menu is opened right after its parent, it must be correctly positioned

What is the current behavior?

It's slightly shifted up in a particular situation: when you click on the menu trigger and the mouse pointer stay in a position to immediately trigger the submenu with a minimum movement. Apparently, this happens because the nested menu is triggered before the parent menu opening animation is completely finished:

What are the steps to reproduce?

Well, I recorded the animated gif above from the docs site, but I caught this bug while I was trying another issue, so here is the stackblitz demo of it: https://stackblitz.com/edit/angular-material-nested-submenu

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

I see it happening in Chrome and didn't check other browsers.

Is there anything else we should know?

Yeah, this does no harm, I no. It contributes to "High Quality" though.

cc: @crisbeto

[crisbeto]

We already have something in place that stops pointer events while a menu is animating. I think it wasn't working for a while due to the issues with running parallel animations, but it seems to be fixed after #9134 got in.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}