Date input suffix not appearing inside a matFormField after Angular upgrade

Question

I have an Input of type 'datetime-local' inside a matFormField, like this:

        <mat-form-field>
          <input
            formControlName="dateTimeSelect"
            matInput
            type="datetime-local"
            id="date"
            name="date"
            required
          />
        </mat-form-field>

The form should have a calender icon as a suffix that, upon click, opens the date/time picker something like this:

This was working fine when I was using Angular v14, but since upgrading my app to Angular v16 it has stopped working.

If I remove the input from its matFormField wrapper, it works as expected. However, inside the matFormField the suffix icon doesn't appear.

I've tried changing my global styling of .mat-mdc-form-field and .mat-mdc-form-field-icon-suffix to see if the suffix icon is perhaps hidden, but it seems that the suffix has been completely removed from the input since updating Angular.

I understand that one solution would be to use a matDatepicker, but I'm trying to avoid that because it doesn't offer a time picker option.

Answer 1

For some reasons the button is hidden somehow but it is still there. In order to show it just add this CSS:

.mdc-text-field__input::-webkit-calendar-picker-indicator {
         display: block !important;
 }