I have a simple EditForm with 3 fields on the model. When I enter text into the first input field, and tab to the next input field, the focus is lost on the next input field.
Additionally; I also have to click twice to get focus onto another input field to type (or button to click the button)
Ultimately, I don't want to use a mess of JavaScript intervention, as I feel this should work normally.
My form:
<EditForm EditContext="new(Search)" class="search-form" OnValidSubmit="async () => await PerformSearchAsync()"><FluentValidationValidator DisableAssemblyScanning=true /><InputTextComponent @bind-Value="Search.AgreementNumber" Label="@Localizer["AgreementNumber"]" TooltipContent="@TooltipContent" Placeholder="@Localizer["AgreementNumberPlaceholder"]" /><InputTextComponent @bind-Value="Search.LesseeName" Label="@Localizer["LesseeName"]" Placeholder="@Localizer["LesseeNamePlaceholder"]" /><InputTextComponent @bind-Value="Search.Postcode" Label="@Localizer["Postcode"]" Placeholder="@Localizer["PostcodePlaceholder"]" /><div class="button-row"> @if (IsFormSubmitting) {<Spinner Label="@Localizer["Searching"]" /> } else {<button class="btn-primary" type="submit">@Localizer["FindAgreementButton"]</button> }</div> @if (!IsFormSubmitting) {<div class="button-row back-button-row"><button class="btn-secondary btn-clear" type="button" @onclick="async () => await BackToHome()"><img src="images/icons/Arrow_Blue_Left.png" style="width: 24px; height: 24px;" /> @Localizer["BackButtonLabel"]</button></div> }</EditForm>My Input Field components:
@inherits InputText<ComponentTemplate Label="@Label" Id="@Id" Required=@Required ValueExpression="@ValueExpression" WrapperClass="@WrapperClass" TooltipContent="@TooltipContent"><InputFieldMarkup><input type="text" @bind-value="CurrentValueAsString" @attributes="InputAttributes" /></InputFieldMarkup></ComponentTemplate>