Problem Icon inside FluentTextField

[meliora-solution]

I have an icon inside FluentTextField to show/hide password. I entered userName and password but when I clicked it, the password becomes null. It turns out that icon inside FluentTextField caused the password = null.

 <EditForm Model="Input" OnValidSubmit="LoginUser" FormName="login">
     <DataAnnotationsValidator />
     <h2>Use a local account to log in.</h2>
     <hr />
     <FluentValidationSummary class="text-danger" role="alert" />
     <FluentStack Orientation="Orientation.Vertical">
         <FluentTextField Name="Input.UserName" @bind-Value="Input.UserName" AutoComplete="username" Required="true" Placeholder="[email protected]" Label="Email" Style="width: 100%" />
         <ValidationMessage For="() => Input.UserName" class="text-danger" />

         <FluentTextField @bind-Value="@Input.Password" Required="true"
                          Placeholder="enter your password" Style="width: 100%" TextFieldType=@textPassword>
             <FluentIcon Slot="end" Icon="Icons.Regular.Size20.Eye" Color="Color.Accent" @onclick="() => ShowPassword()" />
         </FluentTextField>
         <ValidationMessage For="() => Input.Password" class="text-danger" />
         <FluentButton Type="ButtonType.Submit" Appearance="Appearance.Accent" Style="width: 100%">Log in</FluentButton>

     </FluentStack>
 </EditForm>

 private void ShowPassword()
 {
     textPassword = textPassword == TextFieldType.Password ? TextFieldType.Text : TextFieldType.Password;
 }

To make it work, I put that icon outside of the FluentTextField.

 <FluentStack Orientation="Orientation.Horizontal">
     <FluentTextField @bind-Value="@Input.Password" Required="true" 
                      Placeholder="enter your password" Style="width: 100%" TextFieldType=@textPassword>
     </FluentTextField>
     <FluentIcon Value="@(new Icons.Regular.Size20.Eye())" Slot="end" Color="Color.Accent" OnClick="ShowPassword" />
 </FluentStack>
  <ValidationMessage For="() => Input.Password" class="text-danger" />
  <FluentButton Type="ButtonType.Submit" Appearance="Appearance.Accent" Style="width: 100%">Log in</FluentButton>

This is not as good as the first choice (icon inside FluentTextField) but it works. Is there any way to make it work with icon and event ShowPassword inside the textField ?

[dvoituron]

You should probably have a different problem, because I used your example (see below) and the password doesn't become `null'.

<FluentStack Orientation="Orientation.Vertical">
    <FluentTextField Name="Input.UserName" @bind-Value="UserName" AutoComplete="username" Required="true" Placeholder="[email protected]" Label="Email" Style="width: 100%" />
    <FluentTextField @bind-Value="@Password" Required="true"
                     Placeholder="enter your password" Style="width: 100%" TextFieldType="@textPassword">
        <FluentIcon Slot="end" Icon="Icons.Regular.Size20.Eye" Color="Color.Accent" @onclick="() => ShowPassword()" />
    </FluentTextField>
</FluentStack>

@code
{
    string UserName;
    string Password;
    TextFieldType textPassword;

    private void ShowPassword()
    {
        textPassword = textPassword == TextFieldType.Password ? TextFieldType.Text : TextFieldType.Password;
    }
}

[meliora-solution]

the password is not null when I click showpassword. But after I click login, the input.password = null. And it triggered , data validation, password is required.

private async Task LoginUser()
{
  var result = await _authService.Login(Input);
}

[meliora-solution]

The problem happens when I clicked show password and then clicked button submit.

<FluentTextField @bind-Value="@Input.Password" Required="true"
                          Placeholder="enter your password" Style="width: 100%" TextFieldType=@textPassword>
             <FluentIcon Slot="end" Icon="Icons.Regular.Size20.Eye" Color="Color.Accent" @onclick="() => ShowPassword()" />
         </FluentTextField>
         <ValidationMessage For="() => Input.Password" class="text-danger" />
         <FluentButton Type="ButtonType.Submit" Appearance="Appearance.Accent" Style="width: 100%">Log in</FluentButton>

[meliora-solution]

I put a breakpoint and it shows that password is null