[drawer] mask prevents user interaction when nzMask is set to false

[Melmoth-the-Wanderer]

Reproduction link

https://stackblitz.com/edit/angular-qcw7sq

Steps to reproduce

1. disable drawer's mask by setting nzMask to false
2. open drawer

What is expected?

• no mask is visible
• nothing prevents user interaction with elements outside of the drawer

What is actually happening?

• mask is not visible but it exists as transparent layer, preventing user interaction with other elements on the page

Environment	Info
ng-zorro-antd	8.5.2
Browser	Chrome 81.0.4044.138 (64-bits)

---

Rationale: our app is splitted into 2 parts: left side with the tree and right side with tabular data. Clicking table's row on the right side brings the drawer over the table (right side). Now, we would like to drag tree nodes from left side of an app onto the drawer for some reasons. Currently this isn't possible since the mask is always there, transparent - preventing users from dragging the tree node.

Please note that this also happens for [email protected]

[molog]

It's not fixed. There is still a transparent layer when [nzMask]="false"
version 12.0.1

[wzhudev]

@molog Could you please provide a reproduction? We will looks into this. Thanks!

[molog]

@wendellhu95 https://codesandbox.io/s/stupefied-moon-qg8h2?file=/src/app/app.component.ts
The mask is not visible with [nzMask]="false", but still cannot interact with elements outside the drawer.

[xdrago1]

same problem

[coderbahrom]

how to fix when drawer open background is dark

[wenqi73]

Need a style of width and height on

ng-zorro-antd/components/drawer/drawer.component.ts

Line 61 in 64e1c7c

class="ant-drawer"

[zorro-bot]

Hello @Melmoth-the-Wanderer. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please fill the Pull Request Template here, provide documentation/test cases if needed and make sure CI passed, we will review it soon. Appreciate it advance and we are looking forward to your contribution!

你好 @Melmoth-the-Wanderer, 我们完全同意你的提议/反馈，欢迎直接在此仓库 创建一个 Pull Request 来解决这个问题。请务必填写 Pull Request 内的预设模板，提供改动所需相应的测试用例、文档等，并确保 CI 通过，我们会尽快进行 Review，提前感谢和期待您的贡献！

[Userluckytian]

Temporary solution：
I am failed in styles.scss file write deep style, it is not worked;

but in app.component.scss file is OK:

   ::ng-deep .ant-drawer-right.ant-drawer-open{
    width: auto !important;
  }