bug(mat-form-field): Input time element, unexpected behavior when the initial form value is null. Safari

[hdrangel1]

Is this a regression?

• [ ] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Using the next component at Safari HTML:

<div class="content_body">
  <form [formGroup]="formPrincipal">
    <mat-form-field appearance="outline" color="primary">
      <mat-label>Testing</mat-label>
      <input type="time" formControlName="time" matInput>
    </mat-form-field>

    <button mat-button (click)="consoleLog()">
      Console
    </button>
  </form>
</div>

TS:

formPrincipal: FormGroup = new FormGroup({
    time: new FormControl(null, [Validators.required])
  })

  consoleLog() {
    console.log(this.formPrincipal)
  }

sets an initial value of 12:30 pm

and if we check the form at the console:

the status is INVALID and the value is null.

Also, if I try to change the value, it is not recognized by the form:

But if we see this behavior in Chrome, everything works:

Reproduction

Steps to reproduce:

1. Open Safari Navigator

Expected Behavior

The form must register any component change. The time displayed in the form-field-input must be "--:--"

Actual Behavior

The form does not register any component change. The time displayed in the form-field-input is "12:30"

Environment

• Angular: 15.1.2
• CDK/Material: 15.2.8
• Browser(s): Safari
• Operating System (e.g. Windows, macOS, Ubuntu): macOS

[crisbeto]

Material doesn't change the value, it just reads it. This is likely an issue with the forms module.

[hdrangel1]

Material doesn't change the value, it just reads it. This is likely an issue with the forms module.

I tried this:

<div class="content_body">
  <form [formGroup]="formPrincipal">
    <input type="time" formControlName="time">
    <button mat-button (click)="consoleLog()">
      Console
    </button>
  </form>
</div>

without using the component and I see the same behavior, I will redirect this issue. thanks

[JeanMeche]

Hi ! Inputs are a hot mess on Safari.

The input returns an empty string if it hasn't been initialized even if it displays a default time of 12:30. Change the value (both hour and minutes) and you'll get the value.

You'll notice that the non-stylized input is a little bit greyed out when it hasn't been initialized.

So nothing here is caused by angular code.

[garvraj]

Is there any update on this?

[garvraj]

So what is the fix @JeanMeche

[sambalmueslie]

Same issue here: https://github.com/Black-Forrest-Development/open-event/blob/master/src/main/webapp/src/app/event/event-change-form-event/event-change-form-event.component.html

<mat-form-field *ngIf="isVisible('startTime')" class="dense-1" style="flex: 1 1 auto">
         <mat-label>{{'event.form.startTime' | translate}}</mat-label>
         <input matInput type="time" formControlName="startTime">
         <mat-hint align="start">{{'event.form.hint.startTime'| translate}}</mat-hint>
</mat-form-field>

[JeanMeche]

This is a Safari issue, we can't do much here. The workaround is to set a default time.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}