Material: contact-chips: Clicking the scrollbar closes the contact list instead of performing a scroll operation

[molehillrocker]

Bug, enhancement request, or proposal:

Bug.

CodePen and steps to reproduce the issue:

CodePen Demo which demonstrates the issue:

Can be reproduced with the AngularJS Material demo here.

Detailed Reproduction Steps:

1. Focus input field under Searching asynchronously
2. Type a letter, e.g. a
3. Click on the scrollbar (or a scrollbar button)

What is the expected behavior?

The scrollbar scrolls the list of contacts up or down.

What is the current behavior?

The contact list is closed.

What is the use-case or motivation for changing an existing behavior?

Users need to use the mouse wheel to be able to scroll the list of contacts, some users over here have no mouse available and need to use the buttons on their notebook, unfortunately the touch panel is not capable of performing scroll operations.

Which versions of AngularJS, Material, OS, and browsers are affected?

• AngularJS: 1.7.7
• AngularJS Material: 1.1.20
• OS: Windows 7/Windows 10
• Browsers: IE11

Is there anything else we should know? Stack Traces, Screenshots, etc.

Nope.

[marosoft]

Hi @molehillrocker

Is it a duplicate of #11776 ?

[molehillrocker]

The behavior is the same as in #11776, however #11776 targets md-autocomplete and I observe this issue in md-contact-chips. But since I think both use the same code or are derived from each other, I'd say yep, than it is a duplicate. :)

[Splaktar]

Verified that this is fixed by https://github.com/angular/material/commit/5b0c9ba9e0e5313925f6a27390559f32028fd95b (via PR https://github.com/angular/material/pull/11777) in IE11.