Material-components-web-components: mwc-menu closes on selection

Created on 26 May 2020  路  2Comments  路  Source: material-components/material-components-web-components

Describe the bug
When using mwc-menu together with mwc-check-list-item any new selection closes the mwc-menu.

To Reproduce
Steps to reproduce the behavior:

  1. Go to https://material-components.github.io/material-components-web-components/demos/menu/
  2. Click on OPEN GROUPED MENU
  3. Imagine that this is a multi select menu (didn't find better demo there)
  4. Select any option
  5. mwc-menu gets closed

Expected behavior
mwc-menu stays open.

Additional context
When using mwc-menu together with multi attribute my expectation would be that the menu remains open after a selection or, even better, some additional attribute such autoClose would work too.

Components Medium Bug Feature Upstream Enable new use cases Improve accessibility improve ergonomics

All 2 comments

We spoke with design, and we agree that this is a valid UX pattern. This needs to be upstreamed into the MDC foundation as an option to prevent the menu from closing.

Unlike our demo, which uses a list item with a checkmark icon, design recommends using a <mwc-check-list-item> with the checkbox graphic for a persistent multi-select list that would remain open until the user clicked outside the bounds of the menu.

following the code leads to the conclusion this is it's blocked by the lack of relevant setMulti method on mdc's select foundation
Why is material-components/material-components-web#6033 close then?

Seem like mwc's list depends on mdc's list foundation as well
https://github.com/material-components/material-components-web-components/blob/d10fda0a0b663f1e0be185ac2735123ce227a33a/packages/list/mwc-list-base.ts#L66

Was this page helpful?
0 / 5 - 0 ratings

Related issues

MarcSkovMadsen picture MarcSkovMadsen  路  4Comments

bennypowers picture bennypowers  路  4Comments

dfreedm picture dfreedm  路  4Comments

pandres95 picture pandres95  路  4Comments

kr05 picture kr05  路  3Comments