材质角在滚动选择垫并隐藏时滚动到顶部

Question

In my application I'm using material select component.

Expected behavior I want to achieve is: when i open selector field that is bounded to selector should scroll to top of viewport and options should appear underneath.

Demo : https://stackblitz.com/edit/angular-g6s73z

I found an issue that when the selector is close to the bottom of viewport options will end up out of screen.

Issue : https://streamable.com/r3ekd

I cannot find a way to fix it. I tried implementing my custom scroll strategy where I was using scrollIntoView and then manually repositioned a select panel when it overflow a content. It was buggy on android and iOS so i abandoned this idea.

Did anyone had similar problem? How to fix that issue? Maybe there's something I missed?

Custom scroll strategy

enable() {
  setTimeout(() => {
  document.querySelector('#field').scrollIntoView({behavior: 'smooth'});
  this.scrollDispatcher.scrolled().subscribe(() => {
    this.overlayRef.updatePosition();
  });

  this.scrollDispatcher.scrolled().pipe(debounceTime(50), take(1)).subscribe(() => {
    if (parseFloat(this.overlayRef.hostElement.style.top) <= 0) {
      this.overlayRef.overlayElement.style.top = coerceCssPixelValue(12);
    }
  });
  this.overlayRef.updatePosition();

  disablePageScroll();
}

Answer 1

Nice observation.

Upon investigation it became clear that

• mat-select was taken to the top of the view... and placement of the mat-select was correct in all cases (when mat-select was in the middle of the view and when mat-select was at the very bottom of the view)
• the issue was with the div which opens up when we click on mat-select it has the cdk-overlay-10 class on it; On this div, There is a css bottom value assigned to it inline [this is where the issue is and it is this bottom value that pushes the div off-screen]
• solution is: set a top:0 on this div and our problem will be resolved... only one caveat that when we click on mat-select 2 things happen: (1) page scrolls (2) options div becomes visible... so an improved solution would be to have a custom animation that displays the div slowly so that the scrolling is finished before the div becomes visible.

relevant CSS :

::ng-deep .cdk-overlay-pane{top:0 !important; 
opacity: 1; animation:slowReveal 2s ease-in;
}
@keyframes slowReveal{
  from{opacity:0.5;}
  to{opacity:1;}
}

complete forked working stackblitz is here