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)]