Material-components-web: Menu with Surface prevents links with href from firing

[nerg4l]

Bugs

What MDC Web Version are you using?

0.39.0

What browser(s) is this bug affecting?

All

What OS are you using?

Windows 10 Pro N 1709

What are the steps to reproduce the bug?

1. Create a mdc Menu with anchor
2. Add anchor link with href to mdc Menu as a list item
3. Open menu
4. Click on item

CodePen

What is the expected behavior?

Execute event of a tag (anchor link)

What is the actual behavior?

Menu executes preventDefault

Any other information you believe would be useful?

When a list item is clicked handleAction_ of menu is called. As a list item is clicked handleSelection_ and preventDefaultEvent_ methods are called.

handleSelection_ in this cases only executes the close animation.

preventDefaultEvent_ executes preventDefault at line 225 as a tag is not added to ELEMENTS_KEY_ALLOWED_IN.

[ahlechandre]

Menus are my nightmare with MDC. Before Menu Surface, we couldn't use it inside a list item, now that we can, it prevents links default behavior...

[williamernest]

@Nerg4l Thanks for filing this issue. This was an oversight when we built the new menu and it should be resolved in the next major release.

[stof]

note that adding a in the list of ELEMENTS_KEY_ALLOWED_IN might not resolve things entirely. If you have a <span> inside your <a>, the target will not always be the <a> (it can be the <span>, but the default action would still execute the action of the link). We need to make sure that case work too.

[robbyrice]

@williamernest is there any update as to when this will be fixed? I just updated to 0.40.0 and it appears that links inside a menu still do not work correctly.

[AlexZarivayskiy]

Perhaps, this is a temporary solution, until that issue will be solved.

...
<li class="mdc-list-item" role="menuitem" onclick="location.href='myURL'">
...