feat(module:dropdown): allow backdrop to be disabled (#3769)

NG-ZORRO · Jul 15, 2019 · cb51069 · cb51069
1 parent 567072a
commit cb51069
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 1 deletion.
diff --git a/components/dropdown/doc/index.en-US.md b/components/dropdown/doc/index.en-US.md
@@ -30,6 +30,7 @@ import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
 | `[nzTrigger]` | the trigger mode which executes the drop-down action | `'click' \| 'hover'` | `'hover'` |
 | `[nzClickHide]` | whether hide menu when click | `boolean` | `true` |
 | `[nzVisible]` | whether the dropdown menu is visible, double binding | `boolean` | - |
+| `[nzBackdrop]` | whether the dropdown has a backdrop when `nzTrigger` is `click` | `boolean` | `true` |
 | `[nzOverlayClassName]` | Class name of the dropdown root element | `string` | - |
 | `[nzOverlayStyle]` | Style of the dropdown root element | `object` | - |
 | `(nzVisibleChange)` | a callback function takes an argument: `nzVisible`, is executed when the visible state is changed | `EventEmitter<boolean>` | - |

diff --git a/components/dropdown/doc/index.zh-CN.md b/components/dropdown/doc/index.zh-CN.md
@@ -31,6 +31,7 @@ import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
 | `[nzTrigger]` | 触发下拉的行为 | `'click' \| 'hover'` | `'hover'` |
 | `[nzClickHide]` | 点击后是否隐藏菜单 | `boolean` | `true` |
 | `[nzVisible]` | 菜单是否显示，可双向绑定 | `boolean` | - |
+| `[nzBackdrop]` | 是否在 `nzTrigger` 为 `click`时增加背景蒙版 | `boolean` | `true` |
 | `[nzOverlayClassName]` | 下拉根元素的类名称 | `string` | - |
 | `[nzOverlayStyle]` | 下拉根元素的样式 | `object` | - |
 | `(nzVisibleChange)` | 菜单显示状态改变时调用，参数为 nzVisible | `EventEmitter<boolean>` | - |

diff --git a/components/dropdown/nz-dropdown.directive.spec.ts b/components/dropdown/nz-dropdown.directive.spec.ts
@@ -95,6 +95,23 @@ describe('dropdown', () => {
       );
     }).not.toThrowError();
   }));
+  it('should backdrop be disabled', fakeAsync(() => {
+    const fixture = createComponent(NzTestDropdownComponent, [], []);
+    fixture.componentInstance.trigger = 'click';
+    fixture.componentInstance.backdrop = false;
+    fixture.detectChanges();
+
+    expect(() => {
+      const dropdownElement = fixture.debugElement.query(By.directive(NzDropDownDirective)).nativeElement;
+      dispatchFakeEvent(dropdownElement, 'mouseenter');
+      fixture.detectChanges();
+      tick(1000);
+      fixture.detectChanges();
+
+      const backdrop = overlayContainerElement.querySelector('.cdk-overlay-backdrop');
+      expect(backdrop).toBeNull();
+    }).not.toThrowError();
+  }));
   it('should nzOverlayClassName and nzOverlayStyle work', fakeAsync(() => {
     const fixture = createComponent(NzTestDropdownComponent, [], []);
     fixture.detectChanges();
@@ -152,6 +169,7 @@ describe('dropdown', () => {
       [nzTrigger]="trigger"
       [nzDisabled]="disabled"
       [nzPlacement]="placement"
+      [nzBackdrop]="backdrop"
       [nzOverlayClassName]="className"
       [nzOverlayStyle]="overlayStyle"
       >Trigger
@@ -166,6 +184,7 @@ describe('dropdown', () => {
   `
 })
 export class NzTestDropdownComponent {
+  backdrop = true;
   trigger = 'hover';
   placement = 'bottomLeft';
   disabled = false;

diff --git a/components/dropdown/nz-dropdown.directive.ts b/components/dropdown/nz-dropdown.directive.ts
@@ -60,6 +60,7 @@ export class NzDropDownDirective implements AfterViewInit, OnDestroy, OnChanges
   @Input() nzDropdownMenu: NzDropdownMenuComponent;
   @Input() nzTrigger: 'click' | 'hover' = 'hover';
   @Input() nzMatchWidthElement: ElementRef;
+  @Input() @InputBoolean() nzBackdrop = true;
   @Input() @InputBoolean() nzClickHide = true;
   @Input() @InputBoolean() nzDisabled = false;
   @Input() @InputBoolean() nzVisible = false;
@@ -89,7 +90,7 @@ export class NzDropDownDirective implements AfterViewInit, OnDestroy, OnChanges
         .flexibleConnectedTo(this.el)
         .withLockedPosition(),
       minWidth: this.triggerWidth,
-      hasBackdrop: this.nzTrigger === 'click',
+      hasBackdrop: this.nzBackdrop && this.nzTrigger === 'click',
       scrollStrategy: this.overlay.scrollStrategies.reposition()
     });
   }