angularselectscrollangular-materialhorizontal-scrolling

Angular MatSelect and horizontal scroll problem

As you can see in the stackblitz exemple, the vanilla html select works fine in horizontal scrollable div, but not the mat-select (or also material menu). To reproduce, scroll to left and click on a select, this will scroll to right on click, so you can't change selected option on firsts selects.

I've opened an issue about this problem, but I do not get answers. So I'm asking here if someone has already encountered this problem, or if you have any idea to solve this.

Solution

  • You are having the below code, which sets the scroll left position, that is causing this weird bug, since it's firing on every click of the view. It's not a problem with the Angular Material select.

    You can instead set it to ngAfterViewInit, this seems to solve the issue.

    site-breadcrumb.component.ts

    Before:

    ngAfterViewChecked() {
  // this.breadcrumbContainer.nativeElement.scrollLeft =
  //   this.breadcrumbContainer.nativeElement.scrollWidth;
}

    After:

    ngAfterViewInit() {
  this.breadcrumbContainer.nativeElement.scrollLeft =
    this.breadcrumbContainer.nativeElement.scrollWidth;
}

    Stackblitz Demo

    Sample code where it works fine