From e6e2369d24dae13878badd13e7070fc6c44a7087 Mon Sep 17 00:00:00 2001
From: Liad Idan <liad.idan@gmail.com>
Date: Sat, 24 Nov 2018 13:46:14 +0200
Subject: [PATCH] fix(module:menu): fix dropdown menu item selected className
 (#2434)

close #2433
---
 components/dropdown/nz-dropdown.spec.ts   | 11 ++++++++++-
 components/menu/nz-menu-item.directive.ts | 17 +++++++++++++----
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/components/dropdown/nz-dropdown.spec.ts b/components/dropdown/nz-dropdown.spec.ts
index d8b4acb5d7d..e85604acfea 100644
--- a/components/dropdown/nz-dropdown.spec.ts
+++ b/components/dropdown/nz-dropdown.spec.ts
@@ -133,6 +133,14 @@ describe('dropdown', () => {
       expect(items[ 0 ].classList.contains('ant-dropdown-menu-item')).toBe(true);
       expect(items[ 0 ].classList.contains('ant-dropdown-menu-item-selected')).toBe(false);
     });
+    it('should append the correct className', () => {
+      testComponent.visible = true;
+      testComponent.itemSelected = true;
+      fixture.detectChanges();
+      const items = overlayContainerElement.querySelectorAll('.ant-dropdown-menu-item') as NodeListOf<HTMLElement>;
+      expect(items[ 0 ].classList.contains('.ant-menu-item-selected')).toBe(false);
+      expect(items[ 0 ].classList.contains('ant-dropdown-menu-item-selected')).toBe(true);
+    });
     it('should backdrop work with click', () => {
       testComponent.trigger = 'click';
       fixture.detectChanges();
@@ -390,7 +398,7 @@ describe('dropdown', () => {
         Hover me <i nz-icon type="down"></i>
       </a>
       <ul nz-menu [nzSelectable]="selectable">
-        <li nz-menu-item>
+        <li nz-menu-item [nzSelected]="itemSelected">
           <a>1st menu item</a>
         </li>
         <li nz-menu-item>
@@ -413,6 +421,7 @@ export class NzTestDropdownComponent {
   @ViewChild(NzSubMenuComponent) nzSubMenuComponent: NzSubMenuComponent;
   visible = false;
   selectable = true;
+  itemSelected = false;
   trigger = 'hover';
   placement = 'bottomLeft';
   disabled = false;
diff --git a/components/menu/nz-menu-item.directive.ts b/components/menu/nz-menu-item.directive.ts
index d66d6e34b48..356262fe0ba 100644
--- a/components/menu/nz-menu-item.directive.ts
+++ b/components/menu/nz-menu-item.directive.ts
@@ -21,6 +21,7 @@ import { NzSubMenuComponent } from './nz-submenu.component';
 export class NzMenuItemDirective implements OnInit {
   private _disabled = false;
   private _selected = false;
+  private _initialized = false;
   level = 0;
   padding = null;
   isInDropDown = false;
@@ -37,10 +38,8 @@ export class NzMenuItemDirective implements OnInit {
   @Input()
   set nzSelected(value: boolean) {
     this._selected = toBoolean(value);
-    if (this._selected) {
-      this.renderer.addClass(this.hostElement.nativeElement, this.isInDropDown ? 'ant-dropdown-menu-item-selected' : 'ant-menu-item-selected');
-    } else {
-      this.renderer.removeClass(this.hostElement.nativeElement, this.isInDropDown ? 'ant-dropdown-menu-item-selected' : 'ant-menu-item-selected');
+    if (this._initialized) {
+      this.setClass();
     }
   }
 
@@ -112,5 +111,15 @@ export class NzMenuItemDirective implements OnInit {
       this.padding = parseInt(this.hostElement.nativeElement.style[ 'padding-left' ], 10);
     }
     this.isInDropDown = this.nzMenuDirective.nzInDropDown;
+    this.setClass();
+    this._initialized = true;
+  }
+
+  setClass(): void {
+    if (this._selected) {
+      this.renderer.addClass(this.hostElement.nativeElement, this.isInDropDown ? 'ant-dropdown-menu-item-selected' : 'ant-menu-item-selected');
+    } else {
+      this.renderer.removeClass(this.hostElement.nativeElement, this.isInDropDown ? 'ant-dropdown-menu-item-selected' : 'ant-menu-item-selected');
+    }
   }
 }