fix(list): checkbox selection #UIM-462 (#484)

positive-js · Jul 9, 2020 · 3219c55 · 3219c55
1 parent ace5937
commit 3219c55
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 9 deletions.
diff --git a/packages/mosaic-dev/list/module.ts b/packages/mosaic-dev/list/module.ts
@@ -15,6 +15,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
@@ -12,21 +12,55 @@
 
 <!--<br><br><br>-->
 
-<h5>multiple selection</h5>
+<h2>Multiple selection: Keyboard</h2>
 <mc-list-selection
     multiple="keyboard"
+    autoSelect
     [(ngModel)]="multipleSelected"
     (selectionChange)="onSelectionChange($event)">
     <mc-list-option value="Normal">Normal</mc-list-option>
-    <mc-list-option value="Hovered" class="mc-hovered">Hovered</mc-list-option>
-    <mc-list-option value="Focused" class="mc-focused">Focused</mc-list-option>
-    <mc-list-option value="Disabled" disabled>Disabled</mc-list-option>
-    <mc-list-option value="Selected" class="mc-selected">Selected</mc-list-option>
+    <mc-list-option value="Hovered">Hovered</mc-list-option>
+    <mc-list-option value="Focused">Focused</mc-list-option>
+    <mc-list-option value="Disabled">Disabled</mc-list-option>
+    <mc-list-option value="Selected">Selected</mc-list-option>
 </mc-list-selection>
 <br>
 <div>multipleSelected: {{ multipleSelected }}</div>
 
-<!--<br><br><br>-->
+<br><br><br>
+
+<h2>Multiple selection: Checkbox</h2>
+<mc-list-selection
+    multiple="checkbox"
+    autoSelect
+    [(ngModel)]="multipleSelectedCheckbox"
+    (selectionChange)="onSelectionChange($event)">
+    <mc-list-option value="Normal">Normal</mc-list-option>
+    <mc-list-option value="Hovered">Hovered</mc-list-option>
+    <mc-list-option value="Focused">Focused</mc-list-option>
+    <mc-list-option value="Disabled">Disabled</mc-list-option>
+    <mc-list-option value="Selected">Selected</mc-list-option>
+</mc-list-selection>
+<br>
+<div>multipleSelectedCheckbox: {{ multipleSelectedCheckbox }}</div>
+
+<br><br><br>
+
+<h2>Single selection</h2>
+<mc-list-selection
+    autoSelect
+    [(ngModel)]="singleSelected"
+    (selectionChange)="onSelectionChange($event)">
+    <mc-list-option value="Normal">Normal</mc-list-option>
+    <mc-list-option value="Hovered">Hovered</mc-list-option>
+    <mc-list-option value="Focused">Focused</mc-list-option>
+    <mc-list-option value="Disabled">Disabled</mc-list-option>
+    <mc-list-option value="Selected">Selected</mc-list-option>
+</mc-list-selection>
+<br>
+<div>singleSelected: {{ singleSelected }}</div>
+
+<br><br><br>
 
 <!--<h5>vertical scroll</h5>-->
 <!--<mc-list-selection style="height: 160px; overflow-y: scroll">-->

diff --git a/packages/mosaic/list/list-selection.component.ts b/packages/mosaic/list/list-selection.component.ts
@@ -489,8 +489,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);
+                }
             }
         }
 
@@ -504,7 +510,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);
             }