ID Property in Component FluentTextField is repeated and causing our test dept to fail, and so prevent deployment to production

[AJ1000]

I am getting the following error (see screenshot below) from my testing dept.

Is there any way I can put unique id's in the input field of the FluentTextField, so that this is no longer an issue? Or is there a work round so I can add in unique id's myself?

This has been reported before in https://github.com/microsoft/fluentui-blazor/issues/629 but my test department will not accept that it is not an issue.

The screenshot is what they are seeing (from the login page identity template you have provided). Here is the affected code snippet:

<FluentTextField Name="Input.Email" @bind-Value="Input.Email" AutoComplete="username" Required="true" Placeholder="name@example.com" Label="Email" Style="width: 100%" />
<FluentValidationMessage For="() => Input.Email" class="text-danger" />

<FluentTextField type="password" Name="Input.Password" @bind-Value="Input.Password" AutoComplete="current-password" Required="true" Placeholder="password" Label="Password" Style="width: 100%" />
<FluentValidationMessage For="() => Input.Password" class="text-danger" />

Please help, as the project can not proceed without approval from the test dept. Thanks in advance.

[vnbaaij]

As explained in #629, this is not an error on the components side but a 'false positive' found by chromium. Also note, that it is flagged as a warning there and not as an error.

There are 2 ways this could potentially be solved: 1) Write a javascript that finds the offending id=control occurences in the shadow dom and replaces/changes those. It is unknown to me if/how that influences the working of the underlying web components. I'm not going to invest time in that from the library side. 2) Raise in issue in the Fluent UI repo where you request it to be solved in the web components script.

p.s. maybe you should also point your test department to https://issues.chromium.org/issues/40938262