[Protractor] Can't click on item triggering a mat-menu once the menu is displayed

[wilhelmhb]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

We should be able to click on the element whether the matMenu is displayed or not.

What is the current behavior?

The item triggering the drop-down containing the matMenu is clickable if and only if the matMenu is hidden.

What are the steps to reproduce?

Unfortunately, this is an issue related to automated testing, thus StackBlitz won't help...
An empty project with the following code in the AppComponent should allow you to reproduce the issue.
<a [matMenuTriggerFor]="bind">{{menu.name}}</a> <mat-menu #bind class="after" [overlapTrigger]="false"> <button mat-menu-item routerLink="/main/">{{button.name}}</button> </mat-menu>

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

I would like to be able to display several different matMenus in the same test without having to navigate to a different page (as I can't collapse the matMenu using the triggering button, I have to click on a button in the matMenu, which implies a navigation step).

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

Angular v5.2.2, Angular-Material v5.1.1, Windows 10, Typescript v2.7.1, Protractor v5.3.0, Chrome

Is there anything else we should know?

Nothing I'm aware of ;)

[spoilerdo]

I got a couple examples that worked for me.
These examples can open a mat-menu and click on a menu item button:

example 1:

        browser.actions().mouseMove(element(by.id('MenuButtonId'))).click().perform();
        browser.wait(until.visibilityOf(element(by.id('MenuItemButtonId'))), 10000);
        browser.executeScript(`
            const button = document.querySelector(
                'button[id="MenuItemButtonId"]'
            );

            button.click();
        `);

example 2:

browser.actions().mouseMove(element(by.id('MenuButtonId'))).click().perform();
        browser.wait(until.elementToBeClickable(element(by.id('MenuItemButtonId'))), 10000);
        browser.actions().mouseMove(element(by.id('MenuItemButtonId'))).perform().then(() => {
            browser.actions().click(element(by.id('MenuItemButtonId'))).click(element(by.id('MenuItemButtonId'))).perform();
        });

You need the 2 click actions on the last example otherwise it won't work. when running that example it will only press the buttons once but it only registers the second time. No idea why.