title: Mat Auto Complete does not open dropdown panel after clicking Clear button
body: <p>I have custom Mat Auto Complete in Angular project. It has 2 suffixes, Clear and Dropdown buttons. When I click on clear button code <code>this.myControl.reset('', { emitEvent: true });</code> resets the input value. But the dropdown panel does not open. I tried to use following formats and none worked</p>
  <ol>
  <li>this.myControl.reset();</li>
  <li>this.myControl.reset('', { emitEvent: true });</li>
  <li>this.myControl.patchValue('');</li>
  </ol>
  <p><a href="https://stackblitz.com/edit/angular-tivwi8?file=src%2Fapp%2Fautocomplete-display-example.ts" rel="nofollow noreferrer">StackBlitz Demo</a></p>
  <p><strong>autocomplete-display-example.ts</strong></p>
  <pre><code>.......
  
   clearInput() {
      this.arrowIcon = &quot;arrow_drop_down&quot;;
      this.myControl.reset('', { emitEvent: true });
    }
  
  ......
  </code></pre>
  <p><strong>autocomplete-display-example.html</strong></p>
  <pre><code>&lt;form class=&quot;example-form&quot;&gt;
   &lt;mat-form-field class=&quot;example-full-width&quot;&gt;
     &lt;mat-label&gt;Assignee&lt;/mat-label&gt;
     &lt;input
       type=&quot;text&quot;
       matInput
       [formControl]=&quot;myControl&quot;
       [matAutocomplete]=&quot;auto&quot;
  
     /&gt;
     &lt;div matSuffix style=&quot;display:flex&quot;&gt;
       &lt;button
         *ngIf=&quot;myControl!==undefined &amp;&amp; myControl.value!==null &amp;&amp; myControl?.value!==''&quot;
         mat-icon-button
         aria-label=&quot;Clear&quot;
         (click)=&quot;clearInput()&quot;
         type=&quot;button&quot;
       &gt;
         &lt;mat-icon&gt;clear&lt;/mat-icon&gt;
       &lt;/button&gt;
  
       &lt;button mat-icon-button aria-label=&quot;Clear&quot; type=&quot;button&quot;&gt;
         &lt;mat-icon&gt;{{arrowIcon}}&lt;/mat-icon&gt;
       &lt;/button&gt;
     &lt;/div&gt;
  
     &lt;mat-autocomplete #auto=&quot;matAutocomplete&quot; [displayWith]=&quot;displayFn&quot; (opened)=&quot;arrowIcon='arrow_drop_up'&quot;
       (closed)=&quot;arrowIcon='arrow_drop_down'&quot; (optionSelected)=&quot;arrowIcon='arrow_drop_down'&quot;&gt;
       &lt;mat-option *ngFor=&quot;let option of filteredOptions | async&quot; [value]=&quot;option&quot;&gt;
         {{option.name}}
       &lt;/mat-option&gt;
     &lt;/mat-autocomplete&gt;
   &lt;/mat-form-field&gt;
  &lt;/form&gt;
  
  &lt;!-- Copyright 2020 Google LLC. All Rights Reserved.
     Use of this source code is governed by an MIT-style license that
     can be found in the LICENSE file at http://angular.io/license --&gt;
  </code></pre>