fix(module:menu): fix dropdown menu item selected className (#2434)

close #2433
NG-ZORRO · Nov 30, 2018 · acbe5da · acbe5da
1 parent 1c7f983
commit acbe5da
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 5 deletions.
diff --git 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
@@ -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');
+    }
   }
 }