ChipList and Autocomplete does not display programmatically set model

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Programmatically setting the model on a mat-input associated with both a mat-chip-list and mat-autocomplete should display the model value in the input.

What is the current behavior?

The value is not displayed in the input. Works when only a mat-chip-list or mat-autocomplete is associated with the mat-input but not both.

What are the steps to reproduce?

http://plnkr.co/edit/n0vabloWOJwnGvjyWXAY

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

Angular Material Beta 12 Angular 4.4.6

[basti1253]

I’ve hit the same issue. Instead of using an ngModel I used a FormControl. Resetting the FormControl value from within ChipInput change event works. Whenever I reset the FormControl value from within autocomplete.optionSelected callback the control value updates, but not the displayed value. I prepared a plunker to demonstrate this, too: https://plnkr.co/edit/dIpxrl?p=preview

As a workaround I reset the value directly on the input element.

[tinayuangao]

The reason is both mat-chip-list and input are MatFormFieldControl, and when you put mat-chip-list in front of input, mat-chip-list is used in form-field and the input will not get the model value. A workaround is putting input before mat-chip-list in html:

  <p>
    <mat-form-field>
       <input matInput type="text" [matChipInputFor]="chipList1" placeholder="Input with Chip List and Autocomplete" [(ngModel)]="model1" [matAutocomplete]="auto1" />
        <mat-chip-list #chipList1>
            <mat-chip *ngFor="let c of chips">
                {{c.text}}
                <mat-icon matChipRemove>cancel</mat-icon>
            </mat-chip>
        </mat-chip-list>
       
    </mat-form-field>
    <mat-autocomplete #auto1="matAutocomplete" [displayWith]="displayWith">
        <mat-option *ngFor="let o of options" [value]="o">
            {{o.text}}
        </mat-option>
    </mat-autocomplete>
  </p>