fix(module:tree-select): should not close when the selectable is false (

NG-ZORRO#3843)

* fix(module:tree-select): should not close when the selectable is false

close NG-ZORRO#3833

* test(module:tree-select): test getter

components/tree-select/doc/index.en-US.md

@@ -42,7 +42,7 @@ import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select';
 | `[nzAsyncData]` | Load data asynchronously (should be used with NzTreeNode.addChildren(...)) | `boolean` | `false` |
 | `[nzNodes]` | Data of the treeNodes | `NzTreeNodeOptions[]` | `[]` |
 | `[nzDefaultExpandAll]` | Whether to expand all treeNodes by default | `boolean` | `false` |
-| `[nzDefaultExpandedKeys]` | Default expanded treeNodes | `string[]` | - |
+| `[nzExpandedKeys]` | Default expanded treeNodes | `string[]` | - |
 | `[nzDisplayWith]` | How to display the selected node value in the trigger | `(node: NzTreeNode) => string` | `(node: NzTreeNode) => node.title` |
 | `[nzMaxTagCount]` | Max tag count to show| number | - |
 | `[nzMaxTagPlaceholder]` | Placeholder for not showing tags | TemplateRef<{ $implicit: NzTreeNode[] }> | - |

components/tree-select/doc/index.zh-CN.md

@@ -42,7 +42,7 @@ import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select';
 | `[nzAsyncData]` | 是否异步加载(显示加载状态) | `boolean` | `false` |
 | `[nzNodes]` | treeNodes 数据 | `NzTreeNodeOptions[]` | `[]` |
 | `[nzDefaultExpandAll]` | 默认展开所有树节点 | `boolean` | `false` |
-| `[nzDefaultExpandedKeys]` | 默认展开指定的树节点 | `string[]` | - |
+| `[nzExpandedKeys]` | 默认展开指定的树节点 | `string[]` | - |
 | `[nzDisplayWith]` | 如何在输入框显示所选的节点值的方法 | `(node: NzTreeNode) => string` | `(node: NzTreeNode) => node.title` |
 | `[nzMaxTagCount]` | 最多显示多少个 tag | number | - |
 | `[nzMaxTagPlaceholder]` | 隐藏 tag 时显示的内容 | TemplateRef<{ $implicit: NzTreeNode[] }> | - |

components/tree-select/nz-tree-select.component.html

@@ -46,7 +46,7 @@
       [nzShowLine]="nzShowLine"
       [nzExpandedIcon]="nzExpandedIcon"
       [nzExpandAll]="nzDefaultExpandAll"
-      [nzExpandedKeys]="nzDefaultExpandedKeys"
+      [nzExpandedKeys]="expandedKeys"
       [nzCheckedKeys]="nzCheckable ? value : []"
       [nzSelectedKeys]="!nzCheckable ? value : []"
       [nzTreeTemplate]="nzTreeTemplate"

components/tree-select/nz-tree-select.component.ts

@@ -37,6 +37,7 @@ import { filter, tap } from 'rxjs/operators';
 import {
   isNotNil,
   slideMotion,
+  warnDeprecation,
   zoomMotion,
   InputBoolean,
   NzFormatEmitEvent,
@@ -117,7 +118,26 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc
   @Input() nzSize: NzSizeLDSType = 'default';
   @Input() nzPlaceHolder = '';
   @Input() nzDropdownStyle: { [key: string]: string };
-  @Input() nzDefaultExpandedKeys: string[] = [];
+  /**
+   * @deprecated 9.0.0 - use `nzExpandedKeys` instead.
+   */
+  @Input()
+  set nzDefaultExpandedKeys(value: string[]) {
+    warnDeprecation(`'nzDefaultExpandedKeys' would be removed in 9.0.0. Please use 'nzExpandedKeys' instead.`);
+    this.expandedKeys = value;
+  }
+  get nzDefaultExpandedKeys(): string[] {
+    return this.expandedKeys;
+  }
+
+  @Input()
+  set nzExpandedKeys(value: string[]) {
+    this.expandedKeys = value;
+  }
+  get nzExpandedKeys(): string[] {
+    return this.expandedKeys;
+  }
+
   @Input() nzDisplayWith: (node: NzTreeNode) => string | undefined = (node: NzTreeNode) => node.title;
   @Input() nzMaxTagCount: number;
   @Input() nzMaxTagPlaceholder: TemplateRef<{ $implicit: NzTreeNode[] }>;
@@ -143,6 +163,7 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc
   dropDownPosition: 'top' | 'center' | 'bottom' = 'bottom';
   selectionChangeSubscription: Subscription;
   selectedNodes: NzTreeNode[] = [];
+  expandedKeys: string[] = [];
   value: string[] = [];
 
   onChange: (value: string[] | string | null) => void;
@@ -285,7 +306,7 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc
 
   onExpandedKeysChange(value: NzFormatEmitEvent): void {
     this.nzExpandChange.emit(value);
-    this.nzDefaultExpandedKeys = [...value.keys!];
+    this.expandedKeys = [...value.keys!];
   }
 
   setInputValue(value: string): void {
@@ -336,7 +357,7 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc
         }),
         filter((event: NzFormatEmitEvent) => {
           const node = event.node!;
-          return this.nzCheckable ? !node.isDisabled && !node.isDisableCheckbox : !node.isDisabled;
+          return this.nzCheckable ? !node.isDisabled && !node.isDisableCheckbox : !node.isDisabled && node.isSelectable;
         })
       ),
       this.nzCheckable ? this.nzTreeCheckBoxChange : observableOf(),

components/tree-select/nz-tree-select.spec.ts

@@ -11,7 +11,8 @@ import {
   dispatchFakeEvent,
   dispatchMouseEvent,
   typeInElement,
-  NzTreeNode
+  NzTreeNode,
+  NzTreeNodeOptions
 } from 'ng-zorro-antd/core';
 
 import { NzTreeSelectComponent } from './nz-tree-select.component';
@@ -247,6 +248,26 @@ describe('tree-select component', () => {
         `+ ${testComponent.value.length - testComponent.maxTagCount} ...`
       );
     }));
+
+    it('should set selectable', fakeAsync(() => {
+      treeSelect.nativeElement.click();
+      fixture.detectChanges();
+      expect(treeSelectComponent.nzOpen).toBe(true);
+      let node = overlayContainerElement.querySelector('nz-tree-node')!;
+      dispatchMouseEvent(node, 'click');
+      fixture.detectChanges();
+      flush();
+      expect(treeSelectComponent.nzOpen).toBe(false);
+      testComponent.nodes[0].selectable = false;
+      treeSelect.nativeElement.click();
+      fixture.detectChanges();
+      expect(treeSelectComponent.nzOpen).toBe(true);
+      node = overlayContainerElement.querySelector('nz-tree-node')!;
+      dispatchMouseEvent(node, 'click');
+      fixture.detectChanges();
+      flush();
+      expect(treeSelectComponent.nzOpen).toBe(true);
+    }));
   });
 
   describe('checkable', () => {
@@ -444,6 +465,7 @@ describe('tree-select component', () => {
       treeSelect.nativeElement.click();
       fixture.detectChanges();
       expect(treeSelectComponent.nzDefaultExpandedKeys.length === 0).toBe(true);
+      expect(treeSelectComponent.nzExpandedKeys.length === 0).toBe(true);
       expect(treeSelectComponent.nzOpen).toBe(true);
       let targetSwitcher = overlayContainerElement.querySelector('.ant-select-tree-switcher')!;
       expect(targetSwitcher.classList.contains('ant-select-tree-switcher_close')).toBe(true);
@@ -452,6 +474,7 @@ describe('tree-select component', () => {
       fixture.detectChanges();
       expect(targetSwitcher.classList.contains('ant-select-tree-switcher_open')).toBe(true);
       expect(treeSelectComponent.nzDefaultExpandedKeys[0] === '1001').toBe(true);
+      expect(treeSelectComponent.nzExpandedKeys[0] === '1001').toBe(true);
       treeSelect.nativeElement.click();
       fixture.detectChanges();
       expect(treeSelectComponent.nzOpen).toBe(false);
@@ -461,6 +484,7 @@ describe('tree-select component', () => {
       expect(treeSelectComponent.nzOpen).toBe(true);
       expect(targetSwitcher.classList.contains('ant-select-tree-switcher_open')).toBe(true);
       expect(treeSelectComponent.nzDefaultExpandedKeys[0] === '1001').toBe(true);
+      expect(treeSelectComponent.nzExpandedKeys[0] === '1001').toBe(true);
     });
   });
 
@@ -486,7 +510,7 @@ describe('tree-select component', () => {
     <nz-tree-select
       style="width:250px;position: relative;display: block;"
       nzPlaceHolder="Please select"
-      [nzDefaultExpandedKeys]="expandKeys"
+      [nzExpandedKeys]="expandKeys"
       [nzNodes]="nodes"
       [(ngModel)]="value"
       [nzSize]="size"
@@ -512,7 +536,7 @@ export class NzTestTreeSelectBasicComponent {
   dropdownMatchSelectWidth = true;
   multiple = false;
   maxTagCount = Infinity;
-  nodes = [
+  nodes: NzTreeNodeOptions[] = [
     {
       title: 'root1',
       key: '1001',