Proposal: Decouple autocomplete from the form control

[kristjanjonsson]

Motivation

Suppose you have a text input that should contain a space separated list of options. As the user is typing the next option the autocomplete should suggest a completion and on picking one it replaces the current word being typed. Real world examples would be the "To" field for email or a search input with multiple keywords and you want to autocomplete only one part of the bigger query string.

With the current API this is hard to implement because the autocomplete effectively hijacks the input field from you and writes directly to it giving you no control on how that selected mat-option should affect the value.

Proposal

Decouple the autocomplete from the form input so that it doesn't write the form control value directly and leave it up to the containing component to decide what to write on "optionSelected". The above example could then be implemented with something like

<input type="text"  matInput [formControl]="myControl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete"
                  (optionSelected)="addOption($event.option.value)">
  <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
    {{option}}
  </mat-option>
</mat-autocomplete>

@Component({
  selector: 'autocomplete-filter-example',
  templateUrl: 'autocomplete-filter-example.html',
  styleUrls: ['autocomplete-filter-example.css'],
})
export class AutocompleteFilterExample {
  options: string[] = ['One', 'Two', 'Three'];
  myControl = new FormControl('');
  filteredOptions = this.myControl.valueChanges
      .pipe(
        map(value => this.currentWord(value)),
        map(current => this._filter(current)));

  currentWord(value: string): string {
    const words = value.split(' ');
    if (words.length === 0)  {
      return value;
    } else {
      return words[words.length - 1];
    }
  }

  private _filter(value: string): string[] {
    const filterValue = value.toLowerCase();
    return this.options.filter(
      option => option.toLowerCase().includes(filterValue)
    );
  }

  addOption(option: string): void {
    const value = this.myControl.value as string;
    const words = value.split(' ');
    if (words.length === 0){
      this.myControl.setValue(option);
    } else {
      words[words.length - 1] = option;
      this.myControl.setValue(words.join(' '));
    }
  }
}

To see what the current behavior is with the above code: https://stackblitz.com/edit/angular-gaktkz

I believe these are all related issues:

Trying to achieve the above using "displayWith": https://github.com/angular/material2/issues/11796 https://github.com/angular/material2/issues/8436

Not exactly same use case as above but would be solved be decoupling autocomplete and the form control: https://github.com/angular/material2/issues/4863

Autocomplete overwriting the value that's being set via formControl.setValue(...) https://github.com/angular/material2/issues/10968 https://github.com/angular/material2/issues/8214

[julianobrasil]

A cdkAutocomplete would be welcome. Another use case is "mentions".

[MartinJHammer]

My team would also love to see this :)

[zoechi]

Related SO question https://stackoverflow.com/questions/54256838/have-mat-autocomplete-not-replace-but-add-value

[harikvpy]

+1