fix(module:menu): fix submenu not active when collapsed

close NG-ZORRO#3345
hsuanxyz · Jun 21, 2019 · 94ed8a1 · 94ed8a1
1 parent 98430b6
commit 94ed8a1
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 1 deletion.
diff --git a/components/menu/nz-menu.spec.ts b/components/menu/nz-menu.spec.ts
@@ -45,7 +45,8 @@ describe('menu', () => {
         NzTestMenuHorizontalComponent,
         NzTestMenuInlineComponent,
         NzDemoMenuNgForComponent,
-        NzTestNgIfMenuComponent
+        NzTestNgIfMenuComponent,
+        NzTestSubMenuSelectedComponent
       ],
       schemas: [NO_ERRORS_SCHEMA],
       providers: [
@@ -490,6 +491,15 @@ describe('menu', () => {
         }).not.toThrowError();
       });
     });
+    describe('submenu default selected', () => {
+      it('should default selected active submenu', () => {
+        const fixture = TestBed.createComponent(NzTestSubMenuSelectedComponent);
+        fixture.detectChanges();
+        expect(fixture.debugElement.nativeElement.querySelector('.ant-menu-submenu').classList).toContain(
+          'ant-menu-submenu-selected'
+        );
+      });
+    });
   });
 });
 
@@ -712,3 +722,22 @@ export class NzTestNgIfMenuComponent {
   text = 'text';
   display = true;
 }
+
+// https://github.com/NG-ZORRO/ng-zorro-antd/issues/3345
+@Component({
+  template: `
+    <ul nz-menu nzMode="inline" nzTheme="dark" nzInlineCollapsed>
+      <li nz-menu-item nz-tooltip nzPlacement="right">
+        <i nz-icon nzType="mail"></i>
+        <span>Navigation One</span>
+      </li>
+      <li nz-submenu nzTitle="Navigation Two" nzIcon="appstore">
+        <ul>
+          <li nz-menu-item nzSelected>Option 5</li>
+          <li nz-menu-item>Option 6</li>
+        </ul>
+      </li>
+    </ul>
+  `
+})
+export class NzTestSubMenuSelectedComponent {}
diff --git a/components/menu/nz-submenu.component.ts b/components/menu/nz-submenu.component.ts
@@ -198,6 +198,7 @@ export class NzSubMenuComponent implements OnInit, OnDestroy, AfterContentInit,
         flatMap(() =>
           merge(this.listOfNzMenuItemDirective.changes, ...this.listOfNzMenuItemDirective.map(menu => menu.selected$))
         ),
+        startWith(true),
         map(() => this.listOfNzMenuItemDirective.some(e => e.nzSelected)),
         takeUntil(this.destroy$)
       )