TextBox Value is Empty on Chrome Autofill
Environment
| Product | TextBox for Blazor |
Description
I am using TextBox components for username and password fields in a form. The Chrome browser saves them and when I execute the application, it automatically fills those fields for me. However, if I try to submit the form, the login fails. The reason is that for the first time, and only for the first time, the value of each field is empty. If I try to login again, the fields appear correctly filled. The issue occurs after an upgrade to version 2.30.
Steps to Reproduce
- Run the snippet
- Enter some values for the username and password fields
- Save their values with the browser management
- Close the app and run it again in order to let the browser fill the fields.
- Without any prior interaction on the page press Login and check the username and password values in the popup - they are empty
- Close the popup and click Login again - username and password values are updated
<label for="userId">Username</label>
<TelerikTextBox Id="userId"
@bind-Value="@UserName">
</TelerikTextBox>
<label for="password">Password</label>
<TelerikTextBox Id="password"
Password="true"
@bind-Value="@Password">
</TelerikTextBox>
<TelerikButton Id="commandSubmit" Icon="@SvgIcon.Login" OnClick="@OnLogin">
Login
</TelerikButton>
@code {
protected string UserName { get; set; } = "";
protected string Password { get; set; } = "";
[CascadingParameter]
public DialogFactory Dialogs { get; set; }
protected async Task OnLogin()
{
await Dialogs.ConfirmAsync($"User: {UserName}; Pass: {Password}", "Confirm user");
}
}
Possible Cause
UI for Blazor 2.30 adds a DebounceDelay parameter for the TextBox. It specifies the time in milliseconds between the last typed symbol and the actual value update. DebounceDelay has a default value of 150ms and depends on the oninput event to count this time.
However, when the browser (Chrome, for example) autofills form field values, the oninput event is not fired until some interaction with the page occurs. This means that the browser does not notify the fields that their values have changed.
Thus, when clicking Login for the first time (interacting with the page), the oninput fires but the default DebounceDelay of 150ms postpones the TextBox value update.
Other components that also have DebounceDelay property and might be affected are TextArea and MaskedTextBox.
Suggested Workarounds
To solve the case, proceed with one of the following options:
- Reduce the DebounceDelay value or even remove it (set its value to 0). Try setting different values to validate what works best for your use case as the minimum DebounceDelay value needed for the according TextBox value update may vary depending on the machine.
- Do not let the browser autofill the values
The example below demonstrates the first approach - removing the default DebounceDelay:
<label for="userId">Username</label>
<TelerikTextBox Id="userId"
@bind-Value="@UserName"
DebounceDelay="0">
</TelerikTextBox>
<label for="password">Password</label>
<TelerikTextBox Id="password"
Password="true"
@bind-Value="@Password"
DebounceDelay="0">
</TelerikTextBox>
<TelerikButton Id="commandSubmit" Icon="@SvgIcon.Login" OnClick="@OnLogin">
Login
</TelerikButton>
@code {
protected string UserName { get; set; } = "";
protected string Password { get; set; } = "";
[CascadingParameter]
public DialogFactory Dialogs { get; set; }
protected async Task OnLogin()
{
await Dialogs.ConfirmAsync($"User: {UserName}; Pass: {Password}", "Confirm user");
}
}