title: Reopen Angular Material autocomplete on clear
body: <p>I have an input <code>instructorControl = new FormControl();</code> with an autocomplete. The autocompelte subscribes to <code>this.instructorControl.valueChanges</code>.
  When a suggestion from the autocomplete is selected or the add button is clicked, the current input value is pushed to an array and the input cleared with <code>this.instructorControl.patchValue('');</code>.</p>
  
  <p>When an autocomplete option is selected, the autocomplete options menu is <em>not</em> opened again. For that, you either have to type something in or refocus the input.</p>
  
  <p>How can I make the autocomplete reopen, when a suggestion is selected?</p>
  
  <p>See this <a href="https://stackblitz.com/edit/angular-x6hftl?file=app/autocomplete-overview-example.html" rel="nofollow noreferrer">stackblitz</a>. (Updated Sep 18)</p>
  
  <h3>app.component.html</h3>
  
  <pre class="lang-xml prettyprint-override"><code>  &lt;button md-button (click)="addInstructor()"&gt;add&lt;/button&gt;
    &lt;md-input-container fxFlex&gt;
      &lt;input mdInput name="instructor" placeholder="instructor" (keydown.enter)="addInstructor()" [mdAutocomplete]="instructorsAuto" [formControl]="instructorControl"&gt;
    &lt;/md-input-container&gt;
  
  
    &lt;md-autocomplete #instructorsAuto="mdAutocomplete"&gt;
      &lt;md-option *ngFor="let instructor of filteredInstructors | async" [value]="instructor" (click)="addInstructor()"&gt;
        {{ instructor }}
      &lt;/md-option&gt;
    &lt;/md-autocomplete&gt;
  
    {{instructors | json}}
  </code></pre>
  
  <h3>app.component.ts</h3>
  
  <pre class="lang-js prettyprint-override"><code>  instructors: string[] = [];
    instructorControl = new FormControl();
    filteredInstructors: Observable&lt;string[]&gt;;
    allInstructors = ['Max', 'Tirrell'];;
    instructorsAuto;
  
    ngOnInit() {
      this.filteredInstructors = this.instructorControl.valueChanges
        .startWith('')
        .map(value =&gt; this.filterInstructors(value));
    }
  
    addInstructor() {
      const instructor: string = this.instructorControl.value;
      if (instructor) {
        this.instructors.push(instructor);
        this.instructorControl.patchValue('');
      }
    }
  
    private filterInstructors(value: string = ''): string[] {
      return this.allInstructors.filter(instructor =&gt; new RegExp(`${value}`, 'gi').test(instructor));
  </code></pre>