UI for Blazor Update Breaks Ability To Submit Form Using Enter Key

[billy]

We recently updated to Telerik.UI.for.Blazor 6.0.0 and now none of the forms on our website will submit using the "Enter" key on the keyboard. You must now either click or tab to the button and then hit enter.

This was not an issue with the previous version that we had pulled in.

Is there a fix for this or a new implementation pattern that needs to be used to support this?

[Dimo]

Hi Billy,

I tested our online Form demos and all of them submit successfully on Enter. Can you show me a small example, which doesn't work in version 6.0, but works in earlier versions?

[billy]

This is my form. This used to work with the earlier (albiet much ealier) version, but now when I attempt to submit this form, it does nothing unless I tab down to the button and hit enter while the button has focus.

<TelerikForm Model="@LoginModel" OnValidSubmit="@HandleSubmit">
			<FormItems>
				<div class="input-wrapper">
					<FVTextBox @bind-Value="@this.LoginModel.Username" TabIndex="1" @ref="@this.UserNameTextBoxRef" />
				</div>

				<div class="input-wrapper">
               <TelerikButton Class="login-action-btn forgot-password" ButtonType="ButtonType.Button" OnClick="@(() => this.ShowForgotUsernamePassword = true)">Forgot Username / Password</TelerikButton>
					<FVButton OnClick="@this.RevealPassword" ButtonType="Telerik.Blazor.ButtonType.Button" Icon="@FontIcon.Eye" Class="show-pw-icon" />
					<FVTextBox @bind-Value="@this.LoginModel.Password" Password="this.HidePassword" TabIndex="2" />
				</div>

			</FormItems>
			<FormButtons>
				<TelerikButton Class="login-btn" Enabled="@(this.LoginModel.IsValid && !this.LoggingIn)" ButtonType="@ButtonType.Submit" ThemeColor="@ThemeConstants.Button.ThemeColor.Primary" TabIndex="3"><TelerikIcon Class="btn-icon" Icon="@FontIcon.CheckOutline" /> Login</TelerikButton>
			</FormButtons>
</TelerikForm>

[Dimo]

Hi Billy,

The Form markup needs some required and some optional updates:

• <FormItems> must not contain custom HTML or components. Use a <FormItemsTemplate> instead.
• The Eye button can be inside a TextBoxSuffixTemplate. This will simplify your markup and possibly improve the UI.

Use this working snippet as a reference:

@using System.ComponentModel.DataAnnotations

<TelerikForm Model="@LoginModel" OnValidSubmit="@HandleSubmit">
    <FormValidation>
        <DataAnnotationsValidator></DataAnnotationsValidator>
    </FormValidation>
    <FormItems>
        <FormItem Field="@nameof(LoginFormModel.Username)" />
        <FormItem Field="@nameof(LoginFormModel.Password)">
            <Template>
                <label for="password-id" class="k-label k-form-label">Password</label>
                <div class="k-form-item-wrap">
                    <div style="display:flex;gap:.4em">
                        <TelerikTextBox @bind-Value="@LoginModel.Password" Password="@(!RevealPassword)">
                            <TextBoxSuffixTemplate>
                                <TelerikButton ButtonType="@ButtonType.Button"
                                               Icon="@FontIcon.Eye"
                                               OnClick="@( () => RevealPassword = !RevealPassword )"></TelerikButton>
                            </TextBoxSuffixTemplate>
                        </TelerikTextBox>
                        <TelerikButton ButtonType="ButtonType.Button">Forgot Username / Password</TelerikButton>
                    </div>
                    <TelerikValidationMessage For="@( () => LoginModel.Password )" />
                </div>
            </Template>
        </FormItem>
    </FormItems>
    <FormItemsTemplate Context="formContext">
        @{
            var formItems = formContext.Items.Cast<IFormItem>().ToList();
        }

        <div class="input-wrapper">
            <TelerikFormItemRenderer Item="@( formItems.First(x => x.Field == nameof(LoginFormModel.Username)) )" />
        </div>
        <div class="input-wrapper">
            <TelerikFormItemRenderer Item="@( formItems.First(x => x.Field == nameof(LoginFormModel.Password)) )" />
        </div>
    </FormItemsTemplate>
    <FormButtons>
        <TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Primary"
                       Icon="@FontIcon.CheckOutline">Login</TelerikButton>
    </FormButtons>
</TelerikForm>

<p><strong style="color:green">@SubmitLog</strong></p>

@code {
    public LoginFormModel LoginModel { get; set; } = new();

    private string SubmitLog { get; set; } = string.Empty;

    private bool RevealPassword { get; set; }

    private void HandleSubmit()
    {
        SubmitLog = $"Success at {DateTime.Now.ToString("HH:mm:ss.fff")} !";
    }

    public class LoginFormModel
    {
        [Required]
        public string Username { get; set; } = string.Empty;

        [Required]
        public string Password { get; set; } = string.Empty;
    }
}