title: mat input with mat-datepicker-toggle problem
body: <p>I have a form where every required field turns red if the user clicks and blur the field without writing anything on the field, the problem comes with this date picker</p>
  
  <pre><code>        &lt;mat-form-field class="contenedorFecha" appearance="outline" color="accent"&gt;
          &lt;mat-label&gt;Fecha plantación&lt;/mat-label&gt;
          &lt;input matInput [matDatepicker]="fechaPlantacion" formControlName="fechaPlantacion" readonly (click)="fechaPlantacion.open()"&gt;
          &lt;div matSuffix style="display:flex; align-items: center"&gt;
              &lt;mat-datepicker-toggle [for]="fechaPlantacion"&gt;&lt;/mat-datepicker-toggle&gt;
              &lt;button mat-icon-button (click)="deleteDate('fechaPlantacion', $event)" [disableRipple]="true" 
              *ngIf="fincaForm.get('fechaPlantacion').value !== null"&gt;
                  &lt;mat-icon class="nav-link-icon mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" role="img" aria-hidden="true"&gt;close&lt;/mat-icon&gt;
              &lt;/button&gt;
          &lt;/div&gt;
          &lt;mat-datepicker #fechaPlantacion&gt;&lt;/mat-datepicker&gt;
      &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>When I click on the input it opens the matDatePicker, but as it opens the date picker the input blurs, so the input changes to red, any way to prevent this? I've tried with css but the problem is I want the input to be red but only when it should </p>