Toggle Eye Icon for Password Visibility in SfTextBox for .NET MAUI Blazor

[Lasitha - BLUE LOTUS X]

I am using the SfTextBox in a .NET MAUI Blazor application to create a password field with an eye icon to toggle password visibility. My goal is to change the icon from an "eye" to an "eye-slash" (or similar) whenever the user clicks to show/hide the password.

<SfTextBox

    ID="passwordBox"

    @ref="TextBoxPasswordObj"

    @bind-Value="_tokenModel.Password"

    ValueChange="@PasswordValueChangeHandler"

    Input="@PasswordInputHandler"

    Type="@TextBoxType"

    CssClass="input-box"

    Placeholder="Password"

    Created="@AddPwdIcon"

    Destroyed="AddPwdIconDestroyed"

    FloatLabelType="@FloatLabelType.Auto"

    @onkeydown="OnPasswordInputKeyDown"

    ></SfTextBox>

public async void AddPwdIcon() { 

// Adding the eye icon initially await TextBoxPasswordObj.AddIconAsync("append", "e-icons e-eye", new Dictionary<string, object>() { { "onclick", EventCallback.Factory.Create<MouseEventArgs>(this, PasswordClick) } }); 

}

public async Task PasswordClick() {

await _JSRuntime.InvokeAsync<object>("showhidePassword", "passwordBox"); IsPasswordVisible = !IsPasswordVisible; 

}

//Java Script

function showhidePassword(textBoxId) {

    const textBox = document.getElementById(textBoxId);

    const icon = textBox.parentElement.querySelector('.e-input-group-icon');

    icon.classList.toggle('fa-eye');

    icon.classList.toggle('fa-eye-slash');

}

 The problem is that the icon does not change when I click on it to show or hide the password. I’ve used e-eye and fa-eye-slash classes, assuming they would toggle correctly, but the icon remains the same.

[Yohapuja Selvakumaran]

Hi  Lasitha,

Thank you for reaching out to us with your requirement. We have carefully reviewed your query, and We are happy to provide a solution that meets your needs. Below is a code sample demonstrating how to manually display the eye icon on the textbox, which toggles the visibility of the password. We've also attached a runnable sample for your convenience.

[Home.razor]

@using Syncfusion.Blazor.Inputs

@inject IJSRuntime JSRuntime

 

<SfTextBox ID="passwordBox" @ref="TextBoxObj" Type="@TextBoxType" Placeholder="Enter Password" Created="@Created"></SfTextBox>

 

@code {

              SfTextBox TextBoxObj;

              bool IsPasswordVisible = false;

              InputType TextBoxType => IsPasswordVisible ? InputType.Text : InputType.Password;

 

              public async Task Created()

              {

                             await TextBoxObj.AddIconAsync("prepend", "fa fa-eye-slash", new Dictionary<string, object>() { { "onclick", EventCallback.Factory.Create<MouseEventArgs>(this, PasswordClick) } });

              }

 

              public async Task PasswordClick()

              {

                             await JSRuntime.InvokeAsync<object>("showhidePassword", "passwordBox");

                             IsPasswordVisible = !IsPasswordVisible;

              }

}

 

[index.cshtml]

  

 <script>

        function showhidePassword(textBoxId) {

            const textBox = document.getElementById(textBoxId);

            const icon = textBox.parentElement.querySelector('.e-input-group-icon');

            icon.classList.toggle('fa-eye');

            icon.classList.toggle('fa-eye-slash');

        }

    </script>

 

In this solution, we are initially adding the eye-slash icon (fa-eye-slash) next to the password field.

When the icon is clicked, it triggers the PasswordClick method, which toggles the password visibility and dynamically changes the icon from eye-slash to eye, and vice versa.

We hope this addresses your requirement. Please feel free to try it out, and let me know if you need any further assistance or modifications.

Regards,

Yohapuja S

Attachment: Textbox_togglemaui_8e1ec57d.zip