Mat Chips Scroll Issue

Question

I was working on with chips and after setting up horizontal scroll to mat chips i found this issue If you click anywhere on mat chips after scroll down it will automatically scoll up to the top. after testing original code of mat chips on stackblitz i found mat chips have this funcationality but default. I need to prevent this from happening.

Here is my HTML code

> <div class="callTags robotoRegular">
    <div class="wrapper">
        <div class="box">
            <div class="boxWrapper">
                <div class="title">
                    <span class="boxTitle">{{ 'multiWrapupTags.categories.title' | translate}}</span>
                </div>
                <mat-form-field  appearance="none" class="example-chip-list">
                    <mat-chip-list #chipList1 >
                        <div class="selectedTags" id="catScroll">
                            <mat-chip
                                *ngFor="let category of selectedCategories"
                                [selectable]="selectable"
                                [removable]="removable"
                                (removed)="remove(category, 'category')">
                                <span >
                                    {{category.Name}}
                                </span>
                                <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
                            </mat-chip>
                            <input
                            #fruitInput
                            class="robotoRegular"
                            [formControl]="categoriesForm"
                            [matAutocomplete]="auto1"
                            [matChipInputFor]="chipList1"
                            (ngModelChange)="change($event, 'category')"
                            placeholder="Select Category"
                            [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                            (matChipInputTokenEnd)="add($event, 'category')">
                        </div>
                        <div class="d-flex">
                            <div class="d-flex flex-column ">
                                <button id="up"><span class="material-icons"> keyboard_arrow_up </span></button>
                                <button id="down"><span class="material-icons"> keyboard_arrow_down </span></button>
                            </div>
                            <button mat-button (click)="deleteAll('category')">Clear</button>
                        </div>
                    </mat-chip-list>
                    <mat-autocomplete #auto1="matAutocomplete">
                        <mat-option  *ngFor="let category of filteredCategories; let i = index"  [value]="category.Name" (click)="selected(category, 'category')">
                               <div>{{category.Name}}</div>
                        </mat-option>
                    </mat-autocomplete>
                </mat-form-field>
                <div class="count">
                    <span >{{selectedCategories.length}}</span>
                </div>
            </div>
        </div>
        <!-- subCategories -->
        <div class="box subCategories">
            <div class="boxWrapper">
                <div class="title">
                    <span class="boxTitle">{{ 'multiWrapupTags.subCategories.title' | translate}}</span>
                </div>
                <mat-form-field  appearance="none" class="example-chip-list">
                    <mat-chip-list #chipList2 aria-label="Fruit selection">
                        <div class="selectedTags wrapups" id='scrol'>
                            <mat-chip
                                *ngFor="let subCat of selectedWrapUps"
                                [selectable]="selectable"
                                [removable]="removable"
                                (removed)="remove(subCat, 'wrapup')">
                                <span class="
                                ">
                                    {{subCat.Name}}
                                </span>
                                <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
                            </mat-chip>
                            <input
                            #categoryInput
                            class="robotoRegular"
                            [formControl]="subcategoriesForm"
                            [matAutocomplete]="auto2"
                            [matChipInputFor]="chipList2"
                            placeholder="Select Wrapup"
                            (ngModelChange)="change($event, 'wrapup')"
                            [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                            (matChipInputTokenEnd)="add($event, 'wrapup')">
                        </div>
                        <div class="d-flex">
                            <div class="d-flex flex-column ">
                                <button id="up"><span class="material-icons"> keyboard_arrow_up </span></button>
                                <button id="down"><span class="material-icons"> keyboard_arrow_down </span></button>
                            </div>
                            <button mat-button (click)="deleteAll('wrapup')">Clear</button>
                        </div>
                    </mat-chip-list>
                    <mat-autocomplete #auto2="matAutocomplete">
                      <mat-option *ngFor="let subCategory of filteredWrapUps" [value]="subCategory.Name" (click) = "selected(subCategory, 'wrapup')">
                        {{subCategory.Name}}
                      </mat-option>
                    </mat-autocomplete>
                </mat-form-field>
                <div class="count">
                    <span >{{selectedWrapUps.length}}</span>
                </div>
            </div>
        </div>
        <div class="box tagsBox">
            <div class="boxWrapper">
                <div class="title">
                    <span class="boxTitle">{{ 'multiWrapupTags.tags.title' | translate}}</span>
                </div>
                <mat-form-field  appearance="none" class="example-chip-list">
                    <mat-chip-list #chipList3 aria-label="Fruit selection">
                        <div class="selectedTags">
                            <mat-chip
                                *ngFor="let tag of selectedTags"
                                [selectable]="selectable"
                                [removable]="removable"
                                (removed)="remove(tag, 'tags')">
                                <span class="
                                ">
                                    {{tag.Name}}
                                </span>
                                <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
                            </mat-chip>
                            <input
                            #fruitInput
                            class="robotoRegular"
                            [formControl]="tagsForm"
                            [matAutocomplete]="auto3"
                            [matChipInputFor]="chipList3"
                            placeholder="Select Tag"
                            (ngModelChange)="change($event, 'tags')"
                            [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                            (matChipInputTokenEnd)="add($event, 'tags')">
                        </div>
                        <div class="d-flex">
                            <div class="d-flex flex-column ">
                                <button id="up"><span class="material-icons"> keyboard_arrow_up </span></button>
                                <button id="down"><span class="material-icons"> keyboard_arrow_down </span></button>
                            </div>
                            <button mat-button (click)="deleteAll('tags')">Clear</button>
                        </div>
                    </mat-chip-list>
                    <mat-autocomplete #auto3="matAutocomplete">
                      <mat-option *ngFor="let tag of filteredTags" [value]="tag.Name" (click)="selected(tag, 'tags')">
                        {{tag.Name}}
                      </mat-option>
                    </mat-autocomplete>
                </mat-form-field>
                <div class="count">
                    <span >{{selectedTags.length}}</span>
                </div>
            </div>
        </div>
        <button mat-stroked-button (click)="onCallEnded()" aria-label="Show an example snack-bar">
           Success Notification
        </button>
    </div>
</div>

Answer 1

Use dom object window:

window.scrollX: Returns the number of pixels that the document has been displaced horizontally.

window.scrollY: Returns the number of pixels that have been scrolled in the document using the vertical scroll.

window.scroll(x-coord,y-coord): Move the window to a particular place in the document. x-coord is the coordinate on the horizontal axis of the document of the pixel that you want to be shown in the upper left. y-coord is the coordinate on the vertical axis of the document of the pixel that you want to be shown in the upper left.

Answer 2

I don't know if this was solved, but since I had to deal with this problem (my mat chip list is horizontal, in a single row, with scroll) I am posting the solution I came up with.

First of all, what is happening is that this is the expected behavior of mat chip list: when it gets focused, the scroll will go back to the first mat chip list.

This is what you can do:

1- Wrap the mat form field that contains the mat chip list inside a new div which style will have 'overflow-x: scroll'

At this point you will see the scroll works fine, but the size of the input is still the initial, so the input might not do what we want it to do (removing a chip, drag and drop, etc.). If this happens, the solution is changing the mat chip list's width dynamically:

2- In the mat form field bind its style width to a numeric variable from your typescript. Since I am working with Angular 9, mine looks like this (there are versions that use ngStyle):

<mat-form-field [style]="{ 'width': listSize + 'px' }">

3- Everytime you add or remove a chip you will need to update the mat chip list's width every time you add or remove one (check the events available for this). You can follow different strategies, in my case I calculate the width depending on the pixel size the chip's text will have, I used this solution: https://stackoverflow.com/a/58705317/11904701