I'm trying to invoke a click on a datetime-local input that is hidden from the user - HTML:

<span *ngIf="startDatetime?.value" (click)="openPicker('start')" >
   {{startDatetime?.value | date: 'MM/dd/yyyy hh:mm a'}}
</span>

<div *ngIf="!startDatetime?.value" class="empty-date" (click)="openPicker('start')">
    --
</div>

<input class="hide-input" formControlName="startDatetime" #startDatetimeInput type='datetime-local'>

CSS:

.hide-input {
  left: -30000px;
  visibility: hidden;
  opacity: 0;
  position: absolute;
}

Typescript:

@ViewChild('startDatetimeInput') startDatetimeInput?: ElementRef<HTMLInputElement>;

get startDatetime(): AbstractControl | null {
  return this.eventForm.get('startDatetime');
}

openPicker(type: any){
  if (type == 'start') {
    this.startDatetimeInput?.nativeElement.click();
  } else if (type == 'end') {
    this.endDatetimeInput?.nativeElement.click();
  }
}

This works great in FF, IE, Chrome and Opera but when it arrives on Safari, it doesn't work, can anybody help me?