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

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
    */

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.
     /// </summary>
     [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
+
+    /// <summary>
+    /// Gets or sets a value indicating whether the Microsoft Edge password toggle should be hidden for password fields.
+    /// </summary>
+    [Parameter]
+    public bool HideEdgePasswordToggle { get; set; }
 
     /// <summary>
     /// 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);
     }
 
+    /// <summary />
+    private bool _isEdgePasswordToggleHidden;
+
     /// <inheritdoc cref="ComponentBase.OnAfterRenderAsync(bool)" />
     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
+            );
+        }
     }
 
     /// <summary>

tests/Core/Components/TextInput/FluentTextInputTests.razor

@@ -87,6 +87,44 @@
            .MarkupMatches($"<fluent-text-input id=\"myId\" slot=\"input\" appearance=\"outline\" type=\"{expectedAttribute}\" />");
     }
 
+    [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(@<FluentTextInput TextInputType="@TextInputType.Password" HideEdgePasswordToggle="true" />);
+        cut.Find("fluent-text-input")
+           .MarkupMatches("<fluent-text-input id=\"myId\" slot=\"input\" appearance=\"outline\" type=\"password\" />");
+
+        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(@<FluentTextInput TextInputType="@TextInputType.Text" HideEdgePasswordToggle="true" />);
+
+        // Assert
+        cut.Find("fluent-text-input")
+            .MarkupMatches("<fluent-text-input id=\"myId\" slot=\"input\" appearance=\"outline\" type=\"text\" />");
+
+        Assert.Empty(invocation.Invocations);
+    }
+
     [Theory]
     [InlineData(TextInputSize.Small)]
     [InlineData(TextInputSize.Medium)]