How to open tree-select in a dropdown menu by default

user_4311833 0
Viewed 937

I'm trying to find a way how to make nz-tree-select be opened by default on dropdown menu item click.

Link to stackblitz

I'm trying to use (nzVisibleChange) event from nz-dropdown alongside [(nzOpen)] state from nz-tree-select. But no luck for now. Also I have an access to NzTreeSelectComponent, but I'm not sure how can I use it.

<button nz-button nz-dropdown [nzDropdownMenu]="menu"
      (nzVisibleChange)="dropDownVisibleChange($event)"
      nzPlacement="bottomLeft"
      nzTrigger="click">Button
</button>

<nz-dropdown-menu #menu="nzDropdownMenu">
  <nz-tree-select #tree [(nzOpen)]="isOpen" class="tree-select" nzNoAnimation nzShowExpand [nzMaxTagCount]="2"
    [nzNodes]="nodes" [nzHideUnMatched]="true" nzVirtualHeight="498px" [nzShowSearch]="true" nzCheckable
    nzPlaceHolder="Please select">
  </nz-tree-select>
</nz-dropdown-menu>

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements AfterViewInit, AfterContentInit {
  isOpen: boolean;
  @ViewChild(NzTreeSelectComponent, { static: true })
  tree: NzTreeSelectComponent;
  nodes = [
    {
      title: "parent 1",
      key: "100",
      children: [
        {
          title: "parent 1-0",
          key: "1001",
          children: [
            { title: "leaf 1-0-0", key: "10010", isLeaf: true },
            { title: "leaf 1-0-1", key: "10011", isLeaf: true }
          ]
        },
        {
          title: "parent 1-1",
          key: "1002",
          children: [{ title: "leaf 1-1-0", key: "10020", isLeaf: true }]
        }
      ]
    }
  ];

  dropDownVisibleChange(open: boolean): void {
    console.log("VisibleChange", open);
    this.isOpen = open;
  }

  ngAfterViewInit(): void {
    console.log(this.tree);
  }

  ngAfterContentInit(): void {
    console.log(this.tree);
  }
}
ng-zorro-antd antd angular
1 Answers

If you look at the source code of nz-tree-select, there are two useful public functions you can use here that will help you resolve the issue, openDropdown and closeDropDown. the nzOpen boolean flag won't help here because it doesn't trigger the dropdown menu.

in your component, you can make the following change:

dropDownVisibleChange(open: boolean): void {
    if (open) {
      setTimeout(() => this.tree.openDropdown());
    } else {
      this.tree.closeDropDown();
    }
  }

the result is, that when you toggle your dropdown (which hosts the tree select), you also toggle the tree select's dropdown. The reason for the setTimeout is that when that event is triggered for opening, the dropdown is not yet visible.

Here is a stackblitz demo

user_31869410
Related