bug(CHIPS): Global configuration (provider) for MatChipsModule does not work

[Frankystan]

Is this a regression?

• [ ] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

If you create a provider to configure adding chips behaviour globally such as when user press COMMA, SPACE or ENTER keycodes , chips are not shown/added to the input. // custom-chips.provider.ts import { Provider } from '@angular/core'; import { MAT_CHIPS_DEFAULT_OPTIONS } from '@angular/material/chips'; import { ENTER, COMMA, SPACE } from '@angular/cdk/keycodes';

export const provideCustomChipsProvider: Provider[] = [ { provide: MAT_CHIPS_DEFAULT_OPTIONS, useValue: { separatorKeyCodes: [COMMA, ENTER, SPACE], }, multi: true, }, ];

// Usage in app.config.ts ... import { provideCustomChipsProvider } from '@providers/custom-chips.provider';

export const appConfig: ApplicationConfig = { providers: [ provideZoneChangeDetection({ eventCoalescing: true }), provideAnimationsAsync(), provideHttpClient(), provideRouter(APP_ROUTES, withComponentInputBinding()), ..... provideCustomChipsProvider, ], };

Reproduction

StackBlitz link: Steps to reproduce:

1. Create provider file for custom configuration for Material Chips named: custom-chips.provider.ts:

   
   import { Provider } from '@angular/core';
   import { MAT_CHIPS_DEFAULT_OPTIONS } from '@angular/material/chips';
   import { ENTER, COMMA, SPACE } from '@angular/cdk/keycodes';

export const provideCustomChipsProvider: Provider[] = [ { provide: MAT_CHIPS_DEFAULT_OPTIONS, useValue: { separatorKeyCodes: [COMMA, ENTER, SPACE], }, multi: true, }, ];

2. Import it in app.config.ts

import { provideCustomChipsProvider } from '@providers/custom-chips.provider';

export const appConfig: ApplicationConfig = { providers: [ provideZoneChangeDetection({ eventCoalescing: true }), provideAnimationsAsync(), provideHttpClient(), provideRouter(APP_ROUTES, withComponentInputBinding()), ..... provideCustomChipsProvider, ], };

### Expected Behavior

Chips added to the input they belong as soon as user press COMMA, SPACE or ENTER keycodes, previously configured in a custom provider

### Actual Behavior

Chips are not added to the input they belong to

### Environment

- Angular:
- CDK/Material:
- Browser(s):
- Operating System (e.g. Windows, macOS, Ubuntu):

[crisbeto]

I suspect the issue is that you have the provider as multi: true which ends up making it an array at runtime. Have you tried to remove the multi?