The email field in my angular app is opening a Key Pad in mobile view and I'm not sure why.
<form (ngSubmit)="onSubmit()" #emailForm="ngForm">
<div class="emailaddress" style="text-align:center;" *ngIf="!showEmail">
<div style="font-size: 20px; display: inline-block;">
My email address is:
</div>
<div style="display: inline-block;">
<label for="emailAddress" class="visually-hidden">My email address is</label>
<input name="emailAddress" id="emailAddress" type="tel" maxlength="50" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f380929e839f96b3969e929a9a9fdd909c9e">[email protected]</a>" [(ngModel)]="emailClass.emailAddress" pattern="([A-Za-z0-9-!#$%&_+`{}|']+)?(\.[A-Za-z0-9-!#$%&_+`{}|']+)*@[A-Za-z0-9-]+\.([A-Za-z0-9]{2,})+" aria-required="true" required/>
</div>
<div style="margin-bottom: 0px; margin-top: 20px;" class="error-generic" *ngIf="emailForm.touched && (emailForm.form.controls['emailAddress'].invalid && emailForm.form.controls['emailAddress'].touched)">
<svg height="32" viewBox="0 0 32 32" width="32"><path d="..." fill="#6d6e71"></path></svg>
Correct the email field to continue.
</div>
<div style="margin-top: 20px;">
<button id="email-me" class="button large" [disabled]="!emailForm.form.valid">Send Email</button>
</div>
</div>
</form>