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: https://app.screencast.com/viI0UMyNQkDt0

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: https://mdbootstrap.com/support/angular/mdb-sidenav-is-failing-accessibility-audit/

We also have this code:

resizeWindow() {
    this.refreshSidenavSettings();
  }

 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.setSlim(false);
      this.sidenav.mode = 'over';
      this.sidenav.backdrop = false;
    } else {
      this.sidenav.setSlim(true);
      this.sidenav.mode = 'side';
      this.sidenav.backdrop = false;
      if (this.user){
        this.sidenav.show()
      }
    }
  }

Rafał Seifert free 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.

FREE CONSULTATION

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

Status

Answered

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