Topic: Video: sidenav blocks access to page content - what's happening?

rikuwolf priority asked 1 year ago

Expected behavior

When the sidenav goes into "over" mode, the user can still access the page's content.

Actual behavior

Watch this video:

After the sidenav has gone into "over" mode, the user cannot enter data into form input fields.

Entering data is even blocked if the "over" sidenav then goes into some other mode, like "side" or is hidden. After "over" becomes active, the form's input is blocked until the user refreshes the page.

We have tried various solutions, like disabling the backdrop and creating our own custom backdrop, but this seems not to be related to the backdrop.

Resources (screenshots, code snippets etc.)

You can see the code for our sidenav in this other ticket:

We also have this code:

resizeWindow() {

 constructor() {
    this.maxWidthMediaQuery = '(max-width: 767px)'; // If more than this max-width, we go into "slim" view

refreshSidenavSettings() {
    if (!this.sidenav) {return;};
    if (window.matchMedia(this.maxWidthMediaQuery).matches) {
      this.sidenav.mode = 'over';
      this.sidenav.backdrop = false;
    } else {
      this.sidenav.mode = 'side';
      this.sidenav.backdrop = false;
      if (this.user){

Rafał Seifert staff answered 1 year ago

Please try adding [focusTrap]="false" input to your sidenav. Let us know if that solves your problem.

rikuwolf priority commented 1 year ago

Thank you, yes! Problem solved!

We're still testing for possible accessibility issues when removing focustrap. But so far, so good.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 4.0.0
  • Device: MacBook Pro
  • Browser: Chrome
  • OS: MacOS
  • Provided sample code: No
  • Provided link: Yes