[docs][Drawer] Right-anchored persistent drawer intercepts click while closed

[gla3dr]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When a right-anchored persistent drawer is closed, it intercepts clicks in its "area" as if it were open.

persistent-drawer-bug.mp4

Expected behavior 🤔

Behavior should be the same as it currently is for a left-anchored persistent drawer.

When a right-anchored persistent drawer is closed, I should be able to click on elements or select text that is in the area taken up by the drawer when it is open.

Both behaviors can be seen in the video in "Current behavior".

Steps to reproduce 🕹

Steps:

The documentation page or the default codesandbox for this component is enough to reproduce: https://codesandbox.io/s/n5rze?file=/demo.js

1. Open the sandbox
2. Try to highlight text in the right-most 240 pixels of the screen where the drawer would be if it was open
3. Move your cursor back and forth across the 240-pixels from the right boundary and notice that it switches between and I-beam and a pointer.

Context 🔦

I would like to be able to place components in the area of the drawer when it is closed that can be clicked on to open the drawer.

If this is a z-index issue, then this issue may be similar, but I don't believe it is the same: #29878

Your environment 🌎

Reproduced in both Chrome 96.0.4664.45 (Official Build) (64-bit) and Firefox 94.0 (64-bit) on Ubuntu 20.04.3 LTS (Focal Fossa)

`npx @mui/envinfo`

Server:

  System:
    OS: Linux 3.10 CentOS Linux 7 (Core)
    CPU: (4) x64 Intel Xeon Processor (Skylake, IBRS)
    Memory: 379.38 MB / 7.80 GB
    Container: Yes
    Shell: 4.2.46 - /bin/bash
  Binaries:
    Node: 14.18.1 - /usr/bin/node
    npm: 6.14.15 - /usr/bin/npm
  Managers:
    pip3: 21.3 - /usr/local/bin/pip3
    RubyGems: 2.0.14.1 - /usr/bin/gem
    Yum: 3.4.3 - /usr/bin/yum
  Utilities:
    CMake: 2.8.12.2 - /usr/bin/cmake
    Make: 3.82 - /usr/bin/make
    GCC: 4.8.5 - /usr/lib64/ccache/gcc
    Git: 2.17.0 - /usr/bin/git
    Subversion: 1.7.14 - /usr/bin/svn
  Servers:
    Apache: 2.4.6 - /usr/sbin/apachectl
  IDEs:
    Nano: 2.3.1 - /usr/bin/nano
    Vim: 7.4 - /usr/bin/vim
  Languages:
    Bash: 4.2.46 - /usr/bin/bash
    Java: 15.0.2 - /usr/bin/javac
    Perl: 5.16.3 - /usr/bin/perl
    Protoc: 3.5.0 - /usr/bin/protoc
    Python: 2.7.5 - /usr/bin/python
    Python3: 3.6.8 - /usr/bin/python3
    Ruby: 2.0.0 - /usr/bin/ruby
  Databases:
    SQLite: 3.7.17 - /usr/bin/sqlite3
  Browsers:
    Firefox: support!
Mozilla Firefox 60.8.0

Client:

  System:
    OS: Linux 5.4 Ubuntu 20.04.3 LTS (Focal Fossa)
  Binaries:
    Node: 10.19.0 - /usr/bin/node
    Yarn: Not Found
    npm: 6.14.4 - /usr/bin/npm
  Browsers:
    Chrome: 96.0.4664.45
    Firefox: 94.0

[gla3dr]

Looks like that fix works. PR created 👍

[niishaaant]

Is the issue resolved or are we still looking for another solution as mentioned in the PR?

[mnajdova]

Is the issue resolved or are we still looking for another solution as mentioned in the PR?

It haven't been resolved, looks like the proposed solution in #29997 (comment) breaks something else.

[alzaar]

Is it possible to trigger the pipeline checks locally ?

[alzaar]

I have a PR for this issue, would it be possible for anyone to review it ? The PR has a green pipeline.
The issue mentioned involves changing the css properties for the right drawer as the drawer component comes after the main tag which ranks higher in the stacking context preventing the user from selecting the text. I can take care of cleaning up of the commit history or anything else that is remaining with the PR.
PR