[dev-v5][TextInput] Added parameter to hide Show Password toggle in Microsoft Edge

[TimTheBimLim]

Pull Request

📖 Description

This is a new feature that allows developers to disable the password reveal button in Microsoft Edge via a new HideEdgePasswordToggle boolean parameter, using the ::ms-reveal CSS control under-the-hood. Because the component is rendered in the Shadow DOM, setting the style in CSS does not work. Currently, developers using this library would have to write custom JavaScript to get this functionality to work without this change.

🎫 Issues

I could not find any related issues, however there was a prior discussion related to this feature.

👩‍💻 Reviewer Notes

This PR adds a HideEdgePasswordToggle parameter to FluentTextField that hides the Microsoft Edge native password reveal button on password fields. The button is injected into the shadow DOM via a :-ms-reveal pseudo-element, so it requires a small style injection into the shadow root via JS. I am not opposed to changing the name of this parameter. I did feel that "HideEdgePasswordReveal" would be a bit confusing with "Hide" and "Reveal" in the same parameter name.

I am relatively new to open source contributions and willing to change whatever is needed.

Smoke test:

• Add a to a page
• Open in Microsoft Edge
• Type into the field - the native reveal button should not appear
• Ensure FluentTextField still works in other browsers

📑 Test Plan

Unit tests in FluentTextInputTests.razor cover the new parameter. Manual testing performed in Edge to verify the password reveal button is hidden when HideEdgePasswordToggle="true" and visible when false.

✅ Checklist

General

• I have added tests for my changes.
• I have tested my changes.
• I have updated the project documentation to reflect my changes.
• I have read the CONTRIBUTING documentation and followed the standards for this project.
  The above "standards" link (https://www.fast.design/docs/community/code-of-conduct/#our-standards) results in a 404, so I cannot say that I have read that page. However, I have read the CONTRIBUTING documentation.

Component-specific

• I have added a new component
• I have added Unit Tests for my new component
• I have modified an existing component
• I have validated the Unit Tests for an existing component

⏭ Next Steps

This would be a bigger change, but potentially better ways to interact with these types of controls in the Shadow DOM in general. Though that change would only be tangentially related to this PR.

[TimTheBimLim]

@microsoft-github-policy-service agree

[Copilot]

Pull request overview

This PR introduces an opt-in feature on FluentTextInput to hide Microsoft Edge’s native password reveal UI by injecting a ::-ms-reveal style into the component’s shadow root via JavaScript interop, addressing the limitation that consumer CSS cannot reach into the shadow DOM.

Changes:

• Added a new HideEdgePasswordToggle [Parameter] to FluentTextInput and a corresponding JS interop call in OnAfterRenderAsync.
• Added a TypeScript helper (setEdgePasswordRevealToggle) that injects/removes a <style> tag inside the shadow root.
• Added bUnit tests covering the new parameter’s impact on rendered markup.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.

File	Description
tests/Core/Components/TextInput/FluentTextInputTests.razor	Adds tests for the new parameter (currently focused on markup behavior).
src/Core/Components/TextInput/FluentTextInput.razor.cs	Introduces the HideEdgePasswordToggle parameter and triggers JS interop for password inputs.
src/Core.Scripts/src/Components/TextInput/TextInput.ts	Implements the shadow-root style injection/removal for Edge’s ::-ms-reveal.

[dvoituron]

I think this parameter is too specific to a particular browser. I need to look into this further to find a more general solution. Give me until next week—that way I'll have more time.