diff --git a/src/Core.Scripts/src/Components/TextInput/TextInput.ts b/src/Core.Scripts/src/Components/TextInput/TextInput.ts
index 1ef4b17bf4..cf0f4934bf 100644
--- a/src/Core.Scripts/src/Components/TextInput/TextInput.ts
+++ b/src/Core.Scripts/src/Components/TextInput/TextInput.ts
@@ -36,6 +36,30 @@ export namespace Microsoft.FluentUI.Blazor.Components.TextInput {
}
};
+ export function setEdgePasswordRevealToggle(id: string, hide: boolean): void {
+ const fieldElement = document.getElementById(id);
+ const shadowRoot = fieldElement?.shadowRoot;
+
+ if (!shadowRoot) {
+ return;
+ }
+
+ const styleElement = shadowRoot.querySelector("style[data-fluent-text-field-edge-password-toggle]");
+
+ if (hide) {
+ if (!styleElement) {
+ const newStyleElement = document.createElement("style");
+ newStyleElement.setAttribute("data-fluent-text-field-edge-password-toggle", "true");
+ newStyleElement.textContent = "#control::-ms-reveal { display: none !important; }";
+ shadowRoot.appendChild(newStyleElement);
+ }
+
+ return;
+ }
+
+ styleElement?.remove();
+ }
+
/**
* Type for elements that support delayed 'immediate' input events
*/
diff --git a/src/Core/Components/TextInput/FluentTextInput.razor.cs b/src/Core/Components/TextInput/FluentTextInput.razor.cs
index 7507335b01..5360e784f0 100644
--- a/src/Core/Components/TextInput/FluentTextInput.razor.cs
+++ b/src/Core/Components/TextInput/FluentTextInput.razor.cs
@@ -156,7 +156,13 @@ public FluentTextInput(LibraryConfiguration configuration) : base(configuration)
/// Gets or sets a value indicating whether spellcheck should be used.
///
[Parameter]
- public bool? Spellcheck { get; set; } // TODO: To verify if this is supported by the component
+ public bool? Spellcheck { get; set; } // TODO: To verify if this is supported by the component
+
+ ///
+ /// Gets or sets a value indicating whether the Microsoft Edge password toggle should be hidden for password fields.
+ ///
+ [Parameter]
+ public bool HideEdgePasswordToggle { get; set; }
///
/// Gets or sets the type of data that can be entered by the user when editing the element or its content.
@@ -202,6 +208,9 @@ protected override async Task OnInitializedAsync()
await base.RenderTooltipAsync(Tooltip);
}
+ ///
+ private bool _isEdgePasswordToggleHidden;
+
///
protected override async Task OnAfterRenderAsync(bool firstRender)
{
@@ -223,6 +232,22 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
await JSRuntime.InvokeVoidAsync("Microsoft.FluentUI.Blazor.Components.TextMasked.applyPatternMask", Id, MaskPattern, MaskLazy, placeholder);
}
}
+
+ if (TextInputType == Components.TextInputType.Password)
+ {
+ await JSRuntime.InvokeVoidAsync(
+ "Microsoft.FluentUI.Blazor.Components.TextInput.setEdgePasswordRevealToggle",
+ Id, HideEdgePasswordToggle
+ );
+ }
+ else if (_isEdgePasswordToggleHidden)
+ {
+ _isEdgePasswordToggleHidden = false;
+ await JSRuntime.InvokeVoidAsync(
+ "Microsoft.FluentUI.Blazor.Components.TextInput.setEdgePasswordRevealToggle",
+ Id, false
+ );
+ }
}
///
diff --git a/tests/Core/Components/TextInput/FluentTextInputTests.razor b/tests/Core/Components/TextInput/FluentTextInputTests.razor
index 9d0a85aede..ef72f2661d 100644
--- a/tests/Core/Components/TextInput/FluentTextInputTests.razor
+++ b/tests/Core/Components/TextInput/FluentTextInputTests.razor
@@ -87,6 +87,44 @@
.MarkupMatches($"");
}
+ [Fact]
+ public void FluentInputText_HideEdgePasswordToggle_DoesNotAffectMarkup()
+ {
+ // Arrange
+ using var context = new IdentifierContext(i => "myId");
+ var invocation = JSInterop.SetupVoid(
+ "Microsoft.FluentUI.Blazor.Components.TextInput.setEdgePasswordRevealToggle",
+ _ => true);
+
+ // Act
+ var cut = Render(@);
+ cut.Find("fluent-text-input")
+ .MarkupMatches("");
+
+ var call = Assert.Single(invocation.Invocations);
+ Assert.Equal("myId", call.Arguments[0]);
+ Assert.Equal(true, call.Arguments[1]);
+ }
+
+ [Fact]
+ public void FluentInputText_HideEdgePasswordToggle_OnNonPasswordField_DoesNotAffectMarkup()
+ {
+ // Arrange
+ using var context = new IdentifierContext(i => "myId");
+ var invocation = JSInterop.SetupVoid(
+ "Microsoft.FluentUI.Blazor.Components.TextInput.setEdgePasswordRevealToggle",
+ _ => true);
+
+ // Act
+ var cut = Render(@);
+
+ // Assert
+ cut.Find("fluent-text-input")
+ .MarkupMatches("");
+
+ Assert.Empty(invocation.Invocations);
+ }
+
[Theory]
[InlineData(TextInputSize.Small)]
[InlineData(TextInputSize.Medium)]