Background
Currently, a Menu can only have a single selected item at a time. We need to enable it to have multiple selected items as well. This is required for the ChipInput with Menu (T345291).
Implementation
The Checkbox component already supports multiselect - you can pass in a modelValue that's a single boolean value (true for checked, false for unchecked), or an array of selected values (which correspond to the inputValues of the checked checkboxes:
name: 'CdxCheckbox',
props: {
/**
* Value of the checkbox or checkbox group.
*
* Provided by `v-model` binding in the parent component.
*/
modelValue: {
type: [ Boolean, Array ] as PropType<boolean | ( string|number )[]>,
default: false
}
}We can do something similar in the Menu component, where the selected prop can either be one of the current types (string, number, or null) or an array of strings and/or numbers. Ideally, like with Checkbox, the user can "turn on" multiselect by simply providing an array for the selected prop rather than a single value or null. If this is not possible, or if we prefer a more explicit API, we can add a prop to allow multiselect.
The Menu component will need to be updated to handle this change to the selected prop, and the UI should show selected styles for each selected item.
Acceptance criteria
- The Menu component optionally supports multiple selections
- When multiple items are selected, they all display selected styles
- Keyboard navigation and accessibility features in Menu still function with multiselect
- Demo is added to the Menu page on the docs site to demonstrate this new functionality
