how to disable outside scrolling while mat-autocomplete panel is open?-CodePudding

Opening a mat-autocomplete in Angular Material doesn't prevent background content from scrolling. I have tried using block strategy and it doesn't work.

CodePudding user response：

Try this strategy--[Hide scroll when input field focused]

Add focus and focusout on your input field and implement methods for that.

in HTML--

(focus)="focusinmethod()"
(focusout)="focusoutmethod()"

in typescript--

  focusinmethod(){
    let b = document.body;
    b.style.overflow = "hidden";
  }
  focusoutmethod(){
    let b = document.body;
    b.style.overflow = "auto";
  }

here I'm providing stackbliz example too. demo