Show Password toggle in FluentTextField

[satyajit-behera]

Hi,

Is it possible to show the toggle for showing password to the user. This comes up randomly, not always.'

Thanks

[vnbaaij]

It comes up only on the first entering of a password. That is standard browser behavior that we cannot change.

[damiarnold]

My comment here does not answer the OP's question of how to add a "Reveal Password" toggle, but does address the notion that what is stated here in the accepted answer is not entirely correct.

The described behavior and image that @AlexHedley shows in his reply of a built-in password reveal toggle is unique to MS Edge (and Legacy Edge, IE 10+), although his screenshot looks different from what Edge currently shows "by default". Other browsers (Chromium, Firefox, Safari and their derivatives including Brave, Vivaldi, and too many others to count) do not typically display this behavior "by default" (although there is probably a one-off browser somewhere that does).

If a custom password reveal button is added, you will want to hide the Edge-specific one as it interferes with the display. Furthermore, you cannot always count on the Edge password toggle to always be there, as it can be disabled entirely via local setting (or even Windows policy for corporate domain-joined environments).

The behavior and display of the MS Edge password reveal button can in fact be changed (or hidden), and is even documented (mostly) by Microsoft themselves: https://learn.microsoft.com/en-us/microsoft-edge/web-platform/password-reveal

I say "mostly", as the tricky part with various TextField or TextBox Blazor components (FluentTextField included) is that simply setting the style in CSS or directly in the page with the component is not enough to hide the MS edge password reveal button, as the actual element is typically rendered in the Shadow DOM. It is doable, and via Google-fu and some (partially correct) CoPilot searches, I have been able to accomplish that with the Blazor FluentTextField. (If you want to see the code and references used to accomplish this, I can provide some snippets.)

What would be absolutely great for the FluentTextField is to add properties to allow customization and setting of a browser-neutral Password Reveal toggle in the component itself.
Some vendors' text field component (such as MudBlazor's TextField) actually do this already and it works for all the browsers I mentioned earlier: https://mudblazor.com/components/textfield#adornments. They also seem to be suppressing the Edge-specific button, albeit they do not appear to render the actual component in Shadow DOM, so theirs is easier to manipulate.

Again, apologies that this does not directly answer the OP's question, but as I just worked through all these issues this past week, I wanted to at least shed some light on the issues faced with Edge's unique situation, and call out that testing these components across multiple browser engines will only help solidify this beautiful component set found in FluentUI-Blazor.

Keep up the great work, guys!

[AlexHedley]

Do you mean like: