fix: Warning: [DOM] Found x elements with non-unique id #control: in TextField TextFieldType="TextFieldType.Password" inside EditForm

[Ogglas]

🐛 Bug Report

TextFieldType="TextFieldType.Password" inside EditForm causes the warning to show up if more than one component with id="control" is used.

https://learn.microsoft.com/en-us/aspnet/core/blazor/forms-and-input-components?view=aspnetcore-7.0

https://www.fluentui-blazor.net/TextField

💻 Repro or Code Sample

Minimal code replication:

<EditForm Model="@exampleModel" Context="formContext">
    <FluentTextField @bind-Value="@value1"></FluentTextField>
    <FluentTextField @bind-Value="@value2" TextFieldType="TextFieldType.Password"></FluentTextField>
</EditForm>

@code
{
    private string value1, value2;
    private ExampleModel exampleModel = new();
}

public class ExampleModel
{
    public string? Name { get; set; }
}

[vnbaaij]

The warning is wrong. The Chromium dev tools are not taking the shadow DOM into consideration when scanning for unique id's. Each id=control is being applied in a component shadow DOM and is unique to that component

[Ogglas]

@vnbaaij Agreed but why is it only present when TextFieldType.Password is used? If possible it would be nice to remove this warning.

[vnbaaij]

Because Chromium is doing a fancy extra check then (with a link on creating beautiful login forms). Warning cannot be removed from our side.

[Narvalex]

Can we include this "Known Issue" in the docs for FluentTextFields? It really seems like an error on this side, but it is not the case.

[vnbaaij]

Added this: