fullstackhero / blazor-starter-kit

Clean Architecture Template for Blazor WebAssembly Built with MudBlazor Components.
MIT License
3.45k stars 726 forks source link

Login Page - Submitting by pressing enter, usercard is emtpy, avatar, username etc to be blank #351

Open dotnetshadow opened 2 years ago

dotnetshadow commented 2 years ago

Describe the bug When you login but press enter on the password field, it logs you in but the avatar and name is blank.

To Reproduce Steps to reproduce the behavior:

  1. Go to Login page
  2. Type your email
  3. Type your password and press enter (Note: don't click the submit button)

Expected behavior The avatar, name and email should be showing on the left hand panel and on the top right corner If I press the submit button then everything works correctly

Screenshots image

Desktop (please complete the following information): Windows 10, chrome, firefox all browsers

dotnetshadow commented 2 years ago

I managed to get a workaround, it's not elegant but works for now

Added @ref="submitButton" to the sign in button

<MudButton @ref="submitButton" ButtonType="ButtonType.Submit" Variant="Variant.Filled" Disabled="@(!Validated)" Color="Color.Primary" Size="Size.Large" Style="width: 100%;">@_localizer["Sign In"]</MudButton>

Added OnKeyPress="KeyHandler" to the textfield

<MudTextField Label="@_localizer["Password"]" Variant="Variant.Outlined"
                          @bind-Value="_tokenModel.Password" For="@(() => _tokenModel.Password)"
                          OnKeyPress="KeyHandler" ... />

The handler forces the submitbutton to have focus

private void KeyHandler(KeyboardEventArgs args)
        {
            if (args.Key == "Enter")
            {
                submitButton.FocusAsync();
            }
        }