[Chips] Selectable=false not working for keyboard input.

[12wrigja]

What is the expected behavior?

Setting "[selectable]=false" on a mat-chip-list causes the chip to not be selectable via either the mouse or keyboard.

What is the current behavior?

Currently, selectable=false does disable mouse changes, but not keyboard changes.

What are the steps to reproduce?

Modifying the default mat-chip-list on the default chips stackblitz to be non-selectable ([selectable]="false") reproduces this behaviour.

https://stackblitz.com/angular/rokobmedblr?file=app%2Fchips-overview-example.html

Add the selectable attribute, and then use the keyboard to focus on a non-selected (grey) chip and press spacebar.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

The stackblitz build says 7.1.1, and I was able to repro this on Chrome Linux and ChromeOS.

Is there anything else we should know?

[12wrigja]

I also noticed that you can set "selectable" on an individual chip, which for my use-case would have worked just as well. However, this isn't referenced in the overview section of the Chips: https://material.angular.io/components/chips/overview

Could we add a note in the selection section saying that this can be set on individual chips as well?

[drc-nloftsgard]

Is this fix still pending?

I'm also surprised to see tabindex still gets set on chips when the chip or chip-list has [selectable]=false. With tabindex set keyboard focus goes to these elements which is undesirable in my use case.

[zarend]

I cannot reproduce with v14 example. I believe this has already been fixed. @12wrigja does the issue persist for you?

Also, it looks like this doesn't affect the MDC-based components because they don't have a selectable Input for mat-chip-listbox.

• https://stackblitz.com/edit/angular-kyavsx?file=src/app/chips-overview-example.html
• Chrome Version 107.0.5304.110 (Official Build) (x86_64)

[12wrigja]

I checked with the team I was on when I filed this, and they don't see their original issue reproducing now that they are using a newer version of Angular, so this can probably be marked as fixed.

[angular-automatic-lock-bot[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.}