fix(tree): selection is not work correctly (#UIM-88) (#184)

tree-select also fixed
positive-js · Jul 24, 2019 · a8d30ec · a8d30ec
1 parent 40e584d
commit a8d30ec
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 12 deletions.
diff --git a/packages/mosaic-dev/tree-select/template.html b/packages/mosaic-dev/tree-select/template.html
@@ -1,8 +1,8 @@
 <br><br><br><br><br><br><br>
 <div style="height: 20px">{{ modelValue }}</div>
 
-<button mc-button (click)="control.disable()">disable</button>
-<button mc-button (click)="modelValue = ['Applications']">setValue</button>
+<button mc-button (click)="control.disable()">disable</button>&nbsp;
+<button mc-button (click)="modelValue = ['Applications']">setValue</button>&nbsp;
 <button mc-button (click)="modelValue = null">reset</button>
 
 <br><br><br>
@@ -11,7 +11,7 @@
     <mc-form-field>
         <mc-tree-select
             [multiple]="true"
-            placeholder="Food I want to eat right now"
+            placeholder="this is placeholder"
             [(value)]="modelValue"
             (selectionChange)="onSelectionChange($event)">
 

diff --git a/packages/mosaic-dev/tree/module.ts b/packages/mosaic-dev/tree/module.ts
@@ -41,6 +41,7 @@ export const TREE_DATA = `
         }
     },
     "Documents": {
+    "Pictures": "Pictures",
       "angular": {
         "src": {
           "core": "ts",

diff --git a/packages/mosaic/tree-select/tree-select.component.ts b/packages/mosaic/tree-select/tree-select.component.ts
@@ -489,13 +489,15 @@ export class McTreeSelect extends McTreeSelectMixinBase implements
             this.fireValueChangedEvent = true;
         }
 
+        this.tree.selectionChange
+            .pipe(takeUntil(this.destroy))
+            .subscribe(() => this.propagateChanges());
+
         this.selectionModel.changed
             .pipe(takeUntil(this.destroy))
             .subscribe((event) => {
                 this.changeDetectorRef.detectChanges();
 
-                this.propagateChanges();
-
                 if (!this.multiple && this.panelOpen) {
                     this.close();
                 }
@@ -762,7 +764,6 @@ export class McTreeSelect extends McTreeSelectMixinBase implements
      */
     onContainerClick() {
         this.focus();
-        this.open();
     }
 
     /** Invoked when an option is clicked. */
@@ -945,11 +946,9 @@ export class McTreeSelect extends McTreeSelectMixinBase implements
     private setSelectionByValue(value: any | any[]) {
         this.options.forEach((option) => { option.deselect(); });
 
-        if (value === null) {
-            this.selectionModel.clear();
+        this.selectionModel.clear();
 
-            return;
-        }
+        if (value === null) { return; }
 
         if (this.multiple && value) {
             if (!Array.isArray(value)) { throw getMcSelectNonArrayValueError(); }

diff --git a/packages/mosaic/tree/tree-selection.ts b/packages/mosaic/tree/tree-selection.ts
@@ -179,18 +179,21 @@ export class McTreeSelection extends McTreeSelectionBaseMixin<McTreeOption>
             .pipe(takeUntil(this.destroy))
             .subscribe((changeEvent) => {
                 this.onChange(changeEvent.source.selected);
+
+                this.options.notifyOnChanges();
             });
 
         this.options.changes
             .pipe(takeUntil(this.destroy))
             .subscribe((options) => {
                 options.forEach((option) => {
+                    option.deselect();
+
                     this.selectionModel.selected.forEach((selectedOption) => {
-                        option._selected = option.value === selectedOption;
+                        if (option.value === selectedOption) { option.select(); }
                     });
                 });
             });
-
     }
 
     ngOnDestroy() {