diff --git a/packages/mosaic-dev/list/module.ts b/packages/mosaic-dev/list/module.ts index bd6c8497e..2b75e9211 100644 --- a/packages/mosaic-dev/list/module.ts +++ b/packages/mosaic-dev/list/module.ts @@ -16,6 +16,8 @@ import { McListModule, McListSelectionChange } from '@ptsecurity/mosaic/list'; export class DemoComponent { typesOfShoes = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers']; multipleSelected = ['Boots', 'Clogs']; + multipleSelectedCheckbox = []; + singleSelected = []; folders = [ { diff --git a/packages/mosaic-dev/list/template.html b/packages/mosaic-dev/list/template.html index b0e7f84f8..9222b53d0 100644 --- a/packages/mosaic-dev/list/template.html +++ b/packages/mosaic-dev/list/template.html @@ -12,21 +12,55 @@ -
multiple selection
+

Multiple selection: Keyboard

Normal - Hovered - Focused - Disabled - Selected + Hovered + Focused + Disabled + Selected
multipleSelected: {{ multipleSelected }}
- +


+ +

Multiple selection: Checkbox

+ + Normal + Hovered + Focused + Disabled + Selected + +
+
multipleSelectedCheckbox: {{ multipleSelectedCheckbox }}
+ +


+ +

Single selection

+ + Normal + Hovered + Focused + Disabled + Selected + +
+
singleSelected: {{ singleSelected }}
+ +


diff --git a/packages/mosaic/list/list-selection.component.ts b/packages/mosaic/list/list-selection.component.ts index 6bc40b24d..1ff694b82 100644 --- a/packages/mosaic/list/list-selection.component.ts +++ b/packages/mosaic/list/list-selection.component.ts @@ -469,8 +469,14 @@ export class McListSelection extends McListSelectionMixinBase implements CanDisa this.selectionModel.toggle(option); } else { if (this.autoSelect) { - this.options.forEach((item) => item.setSelected(false)); - option.setSelected(true); + if (this.multipleMode !== MultipleMode.KEYBOARD) { + this.selectionModel.toggle(option); + } + + if (this.multipleMode === MultipleMode.KEYBOARD || !this.multiple) { + this.options.forEach((item) => item.setSelected(false)); + option.setSelected(true); + } } } @@ -484,7 +490,8 @@ export class McListSelection extends McListSelectionMixinBase implements CanDisa } else if (ctrlKey) { if (!this.canDeselectLast(option)) { return; } } else { - if (this.autoSelect) { + + if (this.multipleMode === MultipleMode.KEYBOARD || !this.multiple) { this.options.forEach((item) => item.setSelected(false)); option.setSelected(true); }