Video: sidenav blocks access to page content - what's happen

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()
      }
    }
  }