Menu should manage its own state

[Westbrook]

Expected Behaviour

value of sp-menu and selected of sp-menu-item should not rely on parent elements that are not in the menu family to manage their state.

Actual Behaviour

sp-dropdown manages this for the cases that this occurs now which makes transporting those interactions difficult. See the sp-split-button pattern that would leverage some version of this.

[Westbrook]

This will soon be possible a la the following demos:

• selects="single": https://westbrook-menu-selects--spectrum-web-components.netlify.app/storybook/?path=/story/menu--single-select
• selects="multiple": https://westbrook-menu-selects--spectrum-web-components.netlify.app/storybook/?path=/story/menu--multiple-select

With various "complex" use cases outlined in:

• https://westbrook-menu-selects--spectrum-web-components.netlify.app/storybook/?path=/story/menu--menu-group-selects
• https://westbrook-menu-selects--spectrum-web-components.netlify.app/storybook/?path=/story/menu--menu-group-selects-multiple
• https://westbrook-menu-selects--spectrum-web-components.netlify.app/storybook/?path=/story/menu-group--mixed
• https://westbrook-menu-selects--spectrum-web-components.netlify.app/storybook/?path=/story/menu-group--inherit

[joekukish]

@Westbrook HTMLSelectElement uses multiple (boolean) for this use case. Why not rely on a standard HTML vocabulary instead of introducing selects?

[Westbrook]

@joekukish This is a great question, and I'm always remiss to depart from the HTML spec. However, multiple or not only outlines two states for this functionality, whereas in this case there are actually three: no selection, one selection, and multiple selections. Due to this, and the presence of selects already available in the library, I thought it would be best to perpetuate this approach.

Can you think of a useful way in which we could leverage the multiple attribute, and get the trinary state covered? If there's something better than what we're doing now, it might be useful to port other APIs to leverage it, so I'm all ears on other options!

[joekukish]

@Westbrook what is the use-case of a menu without selection? What happens when you click an item? Could readonly be used for this use case?

[Westbrook]

Predominately https://opensource.adobe.com/spectrum-css/actionmenu.html, however many consumers are also looking into leveraging this pattern to support customized context menus, etc. In that way, they're not really readonly by way of clicking the items inside of the Menu does something. Also, with "selectable" being additive visual state, there needs to be a DOM hook for both single and multiple selection in order for them to have their visuals delivered correctly. readonly is great, but it could also apply to a Menu that is selectable in any of the three ways we're looking to deliver here. This functional and visual group implies to me that selects="..." gives the implementing developer much more and clearer control than a combination of booleans.