3 thoughts on “Modal opening causes page scroll down

  1. I can reproduce this case:

    • Add an input to the template which is used for modal.
    • Handle AfterViewInit and setfocus to the input (for someone who want to focus to the first input item on modal dialog)
      -> The scroll bar of background page is scrolled to the bottom.

    I also has a workaround solution to fix it: Get the scrollTop then set it again after you set focus for the input. Example:

    var scrollTop = $('body,html').scrollTop();
    inputElement.nativeElement.focus();
    $('body,html').scrollTop(scrollTop);
    
  2. I encountered this problem and noticed that it does indeed scroll the page down when you set something focused on init. Wrapping the focus method call with a timeout did the trick for me.

    ngOnInit() {
        setTimeout(() => this.input.nativeElement.focus(), 0);
     }
    
  3. This is happening to me as well. I’m on:

    "@ng-bootstrap/ng-bootstrap": "6.0.2",
    "bootstrap": "4.4.1",
    

    To fix the issue I had to go and do manually window.scrollTo(0, 0)