bug(mat chips): When i am removing the last chip then main body scroll is moving which is not happening if i remove other than last chip (CORRECT AND EXPECTED BEHAVIOR).

[ErVishalM]

Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/edit/matchiplastchipscrollissue?file=src/app/chips-input-example.html

Steps to reproduce:

1. Mat chip list already created on this URL
2. Try to remove last chip from first row. You will notice that scroll is moving.
3. Now try to remove any chip(except last chip) from first row. You will notice now scroll is not moving which is correct.
   

Expected Behavior

If i remove last chip from first row then scroll should not move.

Actual Behavior

Scroll is moving if i remove last chip from first row.

Environment

• Angular:10.0.0
• CDK/Material:10.0.0
• Browser(s):Google Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

SS Description

I have attached a ss below.
Red circle chip If you remove last chip from first row then scroll is moving (arrow marked on scroll)!
Green circle chip If you remove any chip(except last) from first row then scroll is not moving which is correct and expected behavior!

[crisbeto]

I think what's going on here is that the item, which needs to be focused after the current item is removed, goes one row up and once it becomes focused, the browser has to adjust the scroll position so it's completely inside the view. We could resolve it by moving focus a bit later, but it can cause people's unit tests to fail.

[ErVishalM]

Hi @crisbeto so when can we expect this fix?
Thanks in advance!

[ErVishalM]

Hi @crisbeto any update or timeline on this?
Thanks.

[ErVishalM]

Hi @crisbeto any update or any solution for this?
Thanks.

[ErVishalM]

Hi @jelbourn @crisbeto can you please help me in this.
Thanks.

[ErVishalM]

Hi, I wanted to tell that, This is solved in latest version below is package.json.

"dependencies": {
    "@angular/animations": "^10.1.3",
    "@angular/cdk": "^10.2.2",
    "@angular/common": "^10.1.3",
    "@angular/compiler": "^10.1.3",
    "@angular/core": "^10.1.3",
    "@angular/forms": "^10.1.3",
    "@angular/material": "^10.2.2",
    "@angular/material-moment-adapter": "^10.2.2",
    "@angular/platform-browser": "^10.1.3",
    "@angular/platform-browser-dynamic": "^10.1.3",
    "@angular/router": "^10.1.3",
    "jquery": "^3.5.1",
    "jquery-ui": "^1.12.1",
    "jquery-ui-dist": "^1.12.1",
    "moment": "^2.29.0",
    "ngx-mat-select-search": "^3.1.0",
    "rxjs": "^6.6.3",
    "secure-ls": "^1.2.6",
    "tslib": "^2.0.1",
    "xlsx": "^0.16.7",
    "zone.js": "^0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.1001.3",
    "@angular/cli": "^10.1.3",
    "@angular/compiler-cli": "^10.1.3",
    "@angular/language-service": "^10.1.3",
    "@types/jasmine": "^3.5.14",
    "@types/jasminewd2": "^2.0.8",
    "@types/node": "^14.11.2",
    "codelyzer": "^6.0.0",
    "fast-deep-equal": "^3.1.3",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "^5.2.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~3.3.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "^8.10.2",
    "tslint": "^6.1.3",
    "typescript": "^3.9.7"
  },
  "optionalDependencies": {
    "fsevents": "^2.1.3"
  }

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}