Components: [MatChipList] Disable last chip focus when pressing BACKSPACE with empty input

[gioragutt]

Feature Description

By default, when you have chips, and your input is empty and focused,
When your press BACKSPACE, the last chip will be selected.

The feature I'm looking for is that this behaviour will be behind a flag, which would obviously be enabled/disabled by default (whatever keeps the current behaviour the default), and when the flag is toggled - pressing BACKSPACE when the input is empty would not select the last chip.

Use Case

The use case for this behaviour is when you have chips, and the user deletes whatever input he put in so far, eventually when the input is cleared, the chips will get focused and will be deleted.

This something that may be problematic for some users in some cases, and as far as I can see, it's not something that should be too hard to implement.

Side Note

I've been looking at docs and code to try to disable this behaviour myself, but I couldn't find a way (without changing code).

I tried calling preventDefault and stopPropagation on the events from keyup, keydown and input events on the input[matChipInputFor] input, but I guess that the MatChipList subscription to those events takes precedence over the user subscription (probably due to subscription order), and calling preventDefault/stopPropagation on the event is just too late.

If you can help find a way to achieve this behaviour without changing the component, this would help me a lot.

Thanks!

[dalexander-trc]

The solution described at StackOverflow worked for me, currently using Angular 8.

HTML
<input type="text" [matAutocomplete]="auto" [matChipInputFor]="chipList" (keydown.backspace)="onBackspaceKeydown($event)">

TS
public onBackspaceKeydown(event) { event.stopImmediatePropagation(); }

[gioragutt]

@mmalerba @dalexander-trc has a good point, this does fix it.

Do you still think this should be handled by the component? perhaps my fix is unnecessary.

Stackblitz with the changes

[mmalerba]

I still think that by default it should not start deleting chips after the input is empty. Rather than a configurable option, an even better solution might be to not have an option and just check if the user is holding the backspace key. If they are we could stop short of deleting chips until we detect a keyup/blur event. After that if backspace is pressed again it can start deleting chips

[gioragutt]

@mmalerba So what you’re saying is that when a user presses BS for a long time, it should not delete chips. Soon as user lets go of the BS, he can (assuming focus is not removed from the input) press BS again and it will act like it is today.

Is that what you were thinking?

[mmalerba]

Yeah, that's what I had in mind

[ryandmello1198]

The solution described at StackOverflow worked for me, currently using Angular 8.

HTML
<input type="text" [matAutocomplete]="auto" [matChipInputFor]="chipList" (keydown.backspace)="onBackspaceKeydown($event)">

TS
public onBackspaceKeydown(event) { event.stopImmediatePropagation(); }

This doesn't work after I migrated my project from angular 7 to 9

[rebeb74]

As @ryandmello1198 said, the solution to stopImmediatePropagation() does not works anymore since angular 9.
did someone found another solution ?

@gioragutt How can i update my angular with your changes please ?

[ryandmello1198]

@rebeb74 I tried programmatically focussing other element.

onBackspaceKeydown(event) { 
        event.stopImmediatePropagation(); 
        document.getElementById('focus-this').focus();
}

[rebeb74]

@ryandmello1198 Thanks, it works for me !