title: Angular 7: Clear selection with x-button on a dropdown box
body: <p>I thought I can combine the examples from Angular for <a href="https://material.angular.io/components/select/examples" rel="noreferrer">dropdown</a> and the <a href="https://material.angular.io/components/input/examples" rel="noreferrer">Input with clear box</a> to:</p>
  
  <pre><code>&lt;mat-form-field &gt;
    &lt;mat-select placeholder="Country" [(value)]="selectedCountry" (selectionChange)="emitItemChanges()"&gt;
      &lt;div *ngFor="let item of lstItems|async"&gt;
        &lt;mat-option *ngIf="addItem(item)" [value]="item"&gt;{{item.title}}&lt;/mat-option&gt;
      &lt;/div&gt;
    &lt;/mat-select&gt;
    &lt;button mat-button *ngIf="selectedCountry" matSuffix mat-icon-button aria-label="Clear" 
      (click)="selectedCountry=undefined"&gt;
      &lt;mat-icon&gt;close&lt;/mat-icon&gt;
    &lt;/button&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>Which works close to the way as intended</p>
  
  <p><a href="https://i.stack.imgur.com/yRkT7.png" rel="noreferrer"><img src="https://i.stack.imgur.com/yRkT7.png" alt="enter image description here"></a> </p>
  
  <p>which clears the input. The problem I'm facing now is that it immediately opens the selection box. Anyway how to prevent this behaviour? </p>
  
  <p>I know there exists other solutions for clearing the selection. I want to know if this approach is possible?</p>