title: How to get click event on input within mat-form-field?
body: <p>I want to clear my selected option when click on the autocomplete button:</p>
  
  <pre><code>  &lt;mat-form-field class="example-full-width" (click)="clear()" appearance="outline"&gt;
      &lt;input matInput placeholder="State" aria-label="State" 
      [matAutocomplete]="auto" [formControl]="stateCtrl"&gt;
      &lt;mat-autocomplete #auto="matAutocomplete"&gt;
        &lt;mat-option *ngFor="let state of filteredStates | async" 
        [value]="state.name"&gt;
        &lt;/mat-option&gt;
      &lt;/mat-autocomplete&gt;
    &lt;/mat-form-field&gt; 
  </code></pre>
  
  <p>But click called even when you press a little below.(there is margin within the form)</p>
  
  <p><a href="https://stackblitz.com/edit/angular-k9e7fz?file=app/autocomplete-overview-example.html" rel="nofollow noreferrer">Example showing input clear by clicking outside</a> </p>