'newEmail' box that comes with identity is autopopulating and I can't stop it

Question

I have created a website and included identity for logging in. On the manage your account page, the new email box keeps autopopulating and I can't figure out how to stop it.

I have tried to add the 'autocomplete=off' to the tag (see below code) but it still populates.

@page
@using FarmersPortal.Areas.Identity.Pages.Account.Manage;
@model EmailModel
@{
    ViewData["Title"] = "Manage Email";
    ViewData["ActivePage"] = ManageNavPages.Email;
}

<style>
    body {
        background-image: url('http://10.48.1.215/PORTAL/hero-range-1.jpg');
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        /*        background-color: white;*/
    }
</style>

<h3 style="color:white">@ViewData["Title"]</h3>
<partial name="_StatusMessage" for="StatusMessage" />
<div class="row">
    <div class="col-md-6">
        <form id="email-form" method="post">
            <div asp-validation-summary="All" class="text-danger"></div>
            <div class="form-floating input-group">
                <input asp-for="Email" class="form-control" disabled />
                <div class="input-group-append">
                    <span class="h-100 input-group-text text-success font-weight-bold">✓</span>
                </div>
                <label asp-for="Email" class="form-label"></label>
            </div>


            <div class="form-floating">
                <input asp-for="Input.NewEmail" class="form-control" autocomplete="off" aria-required="true" />
                <label asp-for="Input.NewEmail" class="form-label"></label>
                <span asp-validation-for="Input.NewEmail" class="text-danger"></span>
            </div>
            <button id="change-email-button" type="submit" asp-page-handler="ChangeEmail" class="w-100 btn btn-lg btn-primary">Change email</button>
        </form>
    </div>
</div>

@section Scripts {
    <partial name="_ValidationScriptsPartial" />
}

Answer 1

asp-for sets the id, name and validation related attributes, and it also sets the value of the input element if there is already a value within the model passed to the view.

From your code, You are using:

<input asp-for="Input.NewEmail" class="form-control" autocomplete="off" aria-required="true" />

to input the value of Input.NewEmail, I think before you render this view, Input.NewEmail already has the value, asp-for will get this value and set value="xxx" attribute in input tag.

So if you don't want show the value, You can just use name property instead of asp-for, Change your code to:

<input name="Input.NewEmail" class="form-control" autocomplete="off" aria-required="true" />

Then when render this view, Input tag will show nothing.