fix(module:cascader): cannot update value when it is missing in options (#9124)

* fix(module:cascader): bugfix when ngModel value not existed in options

* fix(module:cascader): accept request change

Author: WwwHhhYran

components/cascader/cascader-tree.service.ts

@@ -22,7 +22,6 @@ export class NzCascaderTreeService extends NzTreeBaseService {
     label: 'label',
     value: 'value'
   };
-  missingNodeList: NzTreeNode[] = [];
 
   override treeNodePostProcessor = (node: NzTreeNode): void => {
     node.key = this.getOptionValue(node);
@@ -76,7 +75,6 @@ export class NzCascaderTreeService extends NzTreeBaseService {
   conductCheckPaths(paths: NzTreeNodeKey[][] | null, checkStrictly: boolean): void {
     this.checkedNodeList = [];
     this.halfCheckedNodeList = [];
-    this.missingNodeList = [];
     const existsPathList: NzTreeNodeKey[][] = [];
     const calc = (nodes: NzTreeNode[]): void => {
       nodes.forEach(node => {
@@ -102,13 +100,13 @@ export class NzCascaderTreeService extends NzTreeBaseService {
     };
     calc(this.rootNodes);
     this.refreshCheckState(checkStrictly);
-    this.missingNodeList = this.getMissingNodeList(paths, existsPathList);
+    // handle missing node
+    this.handleMissingNodeList(paths, existsPathList);
   }
 
-  conductSelectedPaths(paths: NzTreeNodeKey[][], isMulti: boolean): void {
+  conductSelectedPaths(paths: NzTreeNodeKey[][]): void {
     this.selectedNodeList.forEach(node => (node.isSelected = false));
     this.selectedNodeList = [];
-    this.missingNodeList = [];
     const existsPathList: NzTreeNodeKey[][] = [];
     const calc = (nodes: NzTreeNode[]): boolean =>
       nodes.every(node => {
@@ -118,21 +116,24 @@ export class NzCascaderTreeService extends NzTreeBaseService {
           node.isSelected = true;
           this.setSelectedNodeList(node);
           existsPathList.push(nodePath);
-          if (!isMulti) {
-            // if not support multi select
-            return false;
-          }
+          return false;
         } else {
           node.isSelected = false;
         }
         if (node.children.length > 0) {
-          // Recursion
           return calc(node.children);
         }
         return true;
       });
     calc(this.rootNodes);
-    this.missingNodeList = this.getMissingNodeList(paths, existsPathList);
+    this.handleMissingNodeList(paths, existsPathList);
+  }
+
+  private handleMissingNodeList(paths: NzTreeNodeKey[][] | null, existsPathList: NzTreeNodeKey[][]): void {
+    const missingNodeList = this.getMissingNodeList(paths, existsPathList);
+    missingNodeList.forEach(node => {
+      this.setSelectedNodeList(node);
+    });
   }
 
   private getMissingNodeList(paths: NzTreeNodeKey[][] | null, existsPathList: NzTreeNodeKey[][]): NzTreeNode[] {
@@ -165,6 +166,12 @@ export class NzCascaderTreeService extends NzTreeBaseService {
       node = childNode;
     }
 
+    if (this.isMultiple) {
+      node.isChecked = true;
+      node.isHalfChecked = false;
+    } else {
+      node.isSelected = true;
+    }
     return node;
   }
 }

components/cascader/cascader.component.ts

@@ -815,23 +815,22 @@ export class NzCascaderComponent
      * @param shouldUpdateValue if false, only update selected nodes
      */
     const updateNodesAndValue = (shouldUpdateValue: boolean): void => {
-      this.selectedNodes = [
-        ...this.treeService.missingNodeList,
-        ...(this.nzMultiple ? this.getCheckedNodeList() : this.getSelectedNodeList())
-      ].sort((a, b) => {
-        const indexA = value.indexOf(a.key);
-        const indexB = value.indexOf(b.key);
-        if (indexA !== -1 && indexB !== -1) {
-          return indexA - indexB;
-        }
-        if (indexA !== -1) {
-          return -1;
-        }
-        if (indexB !== -1) {
-          return 1;
+      this.selectedNodes = [...(this.nzMultiple ? this.getCheckedNodeList() : this.getSelectedNodeList())].sort(
+        (a, b) => {
+          const indexA = value.indexOf(a.key);
+          const indexB = value.indexOf(b.key);
+          if (indexA !== -1 && indexB !== -1) {
+            return indexA - indexB;
+          }
+          if (indexA !== -1) {
+            return -1;
+          }
+          if (indexB !== -1) {
+            return 1;
+          }
+          return 0;
         }
-        return 0;
-      });
+      );
       if (shouldUpdateValue) {
         this.cascaderService.values = this.selectedNodes.map(node =>
           this.getAncestorOptionList(node).map(o => this.cascaderService.getOptionValue(o))
@@ -857,7 +856,7 @@ export class NzCascaderComponent
         if (multiple) {
           this.treeService.conductCheckPaths(value, this.treeService.isCheckStrictly);
         } else {
-          this.treeService.conductSelectedPaths(value, multiple);
+          this.treeService.conductSelectedPaths(value);
         }
       };
 

components/cascader/cascader.spec.ts

@@ -1689,6 +1689,18 @@ describe('cascader', () => {
       expect(element.classList.contains('ant-select-dropdown-placement-topLeft')).toBe(false);
       expect(element.classList.contains('ant-select-dropdown-placement-topRight')).toBe(true);
     }));
+
+    it('should cascade work when the value of ngModel that is not existed in options', fakeAsync(() => {
+      fixture.detectChanges();
+      testComponent.values = ['zhejiang', 'a'];
+      testComponent.cascader.setMenuVisible(true);
+      fixture.detectChanges();
+      getItemAtColumnAndRow(1, 1)!.click();
+      getItemAtColumnAndRow(2, 1)!.click();
+      getItemAtColumnAndRow(3, 1)!.click();
+      fixture.detectChanges();
+      expect(testComponent.values).toEqual(['zhejiang', 'hangzhou', 'xihu']);
+    }));
   });
 
   describe('multiple', () => {
@@ -1866,6 +1878,42 @@ describe('cascader', () => {
       fixture.detectChanges();
       expect(testComponent.onChanges).toHaveBeenCalledWith([['light']]);
     }));
+
+    describe('should cascade work when the value of ngModel includes nodes that are not existed in options', () => {
+      it('should remove item work', fakeAsync(() => {
+        setValues(2);
+        testComponent.values![0] = ['light', 'a'];
+        tick();
+        fixture.detectChanges();
+        const removeBtn = cascader.queryAll(By.css('.ant-select-selection-item-remove'))[0];
+        removeBtn.nativeElement.click();
+        fixture.detectChanges();
+        const tags = cascader.queryAll(By.directive(NzSelectItemComponent));
+        expect(tags.length).toBe(1);
+      }));
+
+      it('should add item work', fakeAsync(() => {
+        spyOn(testComponent, 'onChanges');
+        setValues(2);
+        testComponent.values![0] = ['light', 'a'];
+        console.log(testComponent.values);
+        tick();
+        fixture.detectChanges();
+        cascader.componentInstance.setMenuVisible(true);
+        fixture.detectChanges();
+        const checkbox = getCheckboxAtColumnAndRow(2, 3)!;
+        checkbox.click();
+        fixture.detectChanges();
+        expect(testComponent.values!.length).toBe(3);
+        const selectedNodes = [
+          ['light', 1],
+          ['light', 'a'],
+          ['light', 2]
+        ];
+        expect(testComponent.values).toEqual(selectedNodes);
+        expect(testComponent.onChanges).toHaveBeenCalledWith(selectedNodes);
+      }));
+    });
   });
 
   describe('load data lazily', () => {