fix(dropdown): doesn't render nested dropdowns (#UIM-773) (#700)

* fix(dropdown): doesn't render nested dropdowns (#UIM-773)

* fixed linter error

* fixed tests

Author: lskramarov

packages/mosaic-dev/dropdown/module.ts

@@ -1,3 +1,4 @@
+/* tslint:disable:no-console */
 import { Component, NgModule, ViewEncapsulation } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
@@ -15,6 +16,33 @@ import { McLinkModule } from '@ptsecurity/mosaic/link';
     encapsulation: ViewEncapsulation.None
 })
 export class DemoComponent {
+    pools = [
+        {
+            id: 1,
+            name: 'x',
+            domains: [
+                { id: 10, name: 'ax' },
+                { id: 11, name: 'bx' }
+            ]
+        },
+        {
+            id: 2,
+            name: 'y',
+            domains: [
+                { id: 20, name: 'ay' },
+                { id: 21, name: 'by' }
+            ]
+        },
+        {
+            id: 3,
+            name: 'z',
+            domains: [
+                { id: 30, name: 'az' },
+                { id: 31, name: 'bz' }
+            ]
+        }
+    ];
+
     someValue = 'Lazy Value';
 
     isDropdownOpen: boolean = false;
@@ -26,6 +54,10 @@ export class DemoComponent {
     dropdownClosed() {
         this.isDropdownOpen = false;
     }
+
+    selectDomain(id: string): void {
+        console.log('selected domain id', id);
+    }
 }
 
 @NgModule({

packages/mosaic-dev/dropdown/template.html

@@ -1,4 +1,39 @@
 <div>
+    <br><br><br>
+
+    <span mc-link
+          pseudo
+          [mcDropdownTriggerFor]="dropdown">
+        Выбрать
+    </span>
+
+    <mc-dropdown #dropdown>
+        <ng-template mcDropdownContent>
+            <button
+                *ngFor="let pool of pools"
+                mc-dropdown-item
+                [mcDropdownTriggerFor]="domainsDropdown"
+                [mcDropdownTriggerData]="{domains: pool.domains}"
+            >
+                {{pool.name}}
+            </button>
+        </ng-template>
+    </mc-dropdown>
+
+    <mc-dropdown #domainsDropdown>
+        <ng-template mcDropdownContent let-domains="domains">
+            <button
+                *ngFor="let domain of domains"
+                mc-dropdown-item
+                (click)="selectDomain(domain.id)"
+            >
+                {{domain.name}}
+            </button>
+        </ng-template>
+    </mc-dropdown>
+
+    <br><br><br>
+
     <span class="mc-group">
         <button mc-button class="mc-group-item mc-active"
                 [ngClass]="{ 'mc-active': isDropdownOpen}"

packages/mosaic/dropdown/dropdown-content.directive.ts

@@ -69,7 +69,7 @@ export class McDropdownContent implements OnDestroy {
      * @docs-private
      */
     detach() {
-        if (this.portal.isAttached) {
+        if (this.portal?.isAttached) {
             this.portal.detach();
         }
     }

packages/mosaic/dropdown/dropdown-trigger.directive.ts

@@ -214,6 +214,8 @@ export class McDropdownTrigger implements AfterContentInit, OnDestroy {
         overlayRef.attach(this.getPortal());
 
         if (this.dropdown.lazyContent) {
+            this.dropdown.lazyContent.detach();
+
             this.dropdown.lazyContent.attach(this.data);
         }
 
@@ -328,14 +330,7 @@ export class McDropdownTrigger implements AfterContentInit, OnDestroy {
             }
 
             dropdownAnimationDoneSubscription
-                .subscribe({
-                    // If lazy content has attached we're need to detach it.
-                    next: this.dropdown.lazyContent ? () => this.dropdown.lazyContent?.detach() : undefined,
-                    error: undefined,
-                    complete: () => {
-                        this.reset();
-                    }
-                });
+                .subscribe(() => this.reset());
         } else {
             this.reset();
 

packages/mosaic/dropdown/dropdown.spec.ts

@@ -631,14 +631,14 @@ describe('McDropdown', () => {
             fixture.detectChanges();
             tick(500);
 
-            expect(fixture.componentInstance.items.length).toBeGreaterThan(0);
+            expect(overlayContainerElement.querySelectorAll('.mc-dropdown__panel').length).toBeGreaterThan(0);
 
             fixture.componentInstance.trigger.close();
             fixture.detectChanges();
             tick(500);
             fixture.detectChanges();
 
-            expect(fixture.componentInstance.items.length).toBe(0);
+            expect(overlayContainerElement.querySelectorAll('.mc-dropdown__panel').length).toBe(0);
         }));
 
         it('should wait for the close animation to finish before considering the panel as closed', fakeAsync(() => {