Input's FormControl setValue does not work when mat-form-field has chip-list and input is linked to autocomplete

[ffredsh]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Input's FormControl's setValue should work for an input that is inside a mat-form-field that has both autocomplete and chip-list.

What is the current behavior?

FormControl setValue does not work when the following iff a mat-form-field has an input that has matAutocomplete AND the mat-form-field has a mat-chip-list.

SetValue works if one removes the matAutocomplete directive from the input or removes the mat-chip-list element.

What are the steps to reproduce?

Demo should have the input incrementing a number every second, which doesn't work:

https://stackblitz.com/edit/angular-ay3yts?file=app%2Fautocomplete-simple-example.html

Deleting mat-chip-list or removing the matAutocomplete directive fixes the issue.

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

I want to be able to programmatically add a chip then clear the input when an option in the autocomplete has been selected.

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

Angular: 5.2.4
Material: 5.2.4

Is there anything else we should know?

Nope :)

[mmalerba]

The stackblitz does not appear to be set up correctly. The <input> needs a matChipInputFor directive rather than a matInput directive (see: https://material.angular.io/components/chips/overview). I also don't think setting a formControl on the input will add chips to the chipList

@tinayuangao is there a way to put a formControl on the mat-chip-list itself so they can update the chips by changing the formControl value?

[ffredsh]

Oops, how embarrassing! I had to recreate the stackblitz after accidentally navigating away from the first one. I've updated the stackblitz.

I'm not looking to add chips through form control, I just want to be able to have the input respond to FormControl's setValue calls. Right now, if you have both a mat-chip-list AND autocomplete, the input view will not respond to setValue. Try commenting out the mat-chip-list OR the autocomplete, you'll see that the input will once again respond to setValue and show a counter going up.

[mmalerba]

Hmm interesting. I made an expanded example that shows this working with other combinations of input and autocomplete but failing for chips + autocomplete. It must be some kind of bad interaction between the two components.

@crisbeto as well, as owner of autocomplete

[bhaumikpandhi]

I'm doing same, chips + autocomplete + Input. The purpose of a combination is allowing a user to select multiple options with searching using APIs (remote data).

Searching will populate autocomplete options and after selecting autocomplete option, I'm populating chip list selected items.

After selection of autocomplete item, value clearance is not working.

<mat-form-field class="demo-chip-list">
	<mat-chip-list #tolist>
		<mat-chip *ngFor="let user of selectedUser" [selectable]="true" [removable]="true">
			{{user.name}}
			<mat-icon matChipRemove>cancel</mat-icon>
		</mat-chip>
		<input matInput placeholder="New user..." type="text" 
		name="to" formControlName="to"
		[matChipInputFor]="tolist"
		(matChipInputTokenEnd)="add($event)" />
	</mat-chip-list>
	<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)" [displayWith]="displayFn">
		<mat-option *ngFor="let user of users" [value]="user">
			{{ user.name }}
		</mat-option>
	</mat-autocomplete>
</mat-form-field>

selected(event){
    this.selectedUser.push(event.option.value);
    this.composeForm.controls['to'].setValue('abc');
}

[marcantoinebouchard]

Hi,

I have the same issue. This causes the following behavior when using the chips with autocomplete example (https://stackblitz.com/angular/beoyjxqloag?file=app%2Fchips-autocomplete-example.ts):

1. Type "L"
2. Select a suggestion (ex: "Lemon")
3. Type "L" again
4. The suggestions are not shown. I guess it's because the valueChanges was not triggered (the field value is still "L")

Thanks,
Marc

[ausmurp]

As a temporary fox for this you can do:

  <mat-form-field *ngIf="formGroup.get('categories') as control">
    <mat-chip-list #categoriesChipList>
      <mat-chip *ngFor="let selected of control.controls; let i = index;" removable="true"
        (removed)="removeCategory(i)">
...
      <input #categoryInput matInput formControlName="categoryInput"
...
    <mat-hint *ngIf="formGroup.get('categoryInput').touched && control.invalid; else showLabel">
      <mat-error>At least 1 category is required</mat-error>
    </mat-hint>
    <ng-template #showLabel>
      <mat-hint>Categories</mat-hint>
    </ng-template>

This will show the error over the hint at least. The control is not underlined in red though..

[njifares]

Having the same issue here. Combining autocomplete and chips on a formField and using control.setValue(...) won't do anything.

Interestingly enough, valueChanges got triggered with the value that is used in control.setValue(...) (but is not displayed)

[nikagar4]

Having the same issue here. Combining autocomplete and chips on a formField and using control.setValue(...) won't do anything.

Interestingly enough, valueChanges got triggered with the value that is used in control.setValue(...) (but is not displayed)

Check your displayFn, if not send more code maybe I can help, I've been searching for bug for hours and finally found it maybe I can help you too

[tim-kuteev]

Same issue here. Any solution?

The only workaround I found is to set the value manually:

<mat-form-field>
  <mat-chip-list #chipList>
    <mat-chip *ngFor="let value of selected">{{value}}</mat-chip>
    <input #inputRef
           placeholder="Input Name"
           [formControl]="inputFormControl"
           [matAutocomplete]="autocomplete"
           [matChipInputFor]="chipList"
           (matChipInputTokenEnd)="add($event.value)">
  </mat-chip-list>
  <mat-autocomplete #autocomplete (optionSelected)="add($event.option.viewValue)">
    <mat-option *ngFor="let value of values" value="{{value}}">{{value}}</mat-option>
  </mat-autocomplete>
</mat-form-field>

  inputFormControl = new FormControl('');
  @ViewChild('inputRef', {static: true}) inputRef: ElementRef<HTMLInputElement>;

  add(value: string): void {
    this.selected.push(value);
    this.inputControl.setValue('');
    this.inputRef.nativeElement.value = ''; // Won't work without this line
  }