fix: Disable Autofill in FluentAutocomplete for Microsoft Edge

[MarvinKlein1508]

🐛 Bug Report

I can't disable the autofill suggestions in Microsoft Edge properly. Whenever a user clicks into one of the FluentAutocomplete fields there will be two popups. One from the component and one from the browser. See:

💻 Repro or Code Sample

I've already tried to set AutoComplete to false and even provided an id for the input:

<FluentAutocomplete TOption="Ansprechpartner"
                    Id="bericht-ansprechpartner"
                    Label="Gesprochen mit (Kunde)"
                    AutoComplete="off"
                    Placeholder="Name"
                    OnOptionsSearch="@OnSearchAnsprechpartner"
                    OptionText="@(item => item.Name)"
                    @bind-SelectedOptions="Input.Ansprechpartner" />

🤔 Expected Behavior

I expect the autofill menu to nor appear in Edge.

😯 Current Behavior

Autofill menu opens everytime.

🔦 Context

My users are confused and select the item from autofill but then they wonder why it isn't a valid selection in the field. I'Ve tried everything to disable this behaviour and right now this ony appears for us in Edge. In Firefox it is disabled. I cannot test Chrome though because we aren't allowed to run Google Chrome in our company.

🌍 Your Environment

.NET 9.0.5 and FluentUI 4.12.0

This happens in Microsoft Edge. Firefox seems to be working fine. I cannot verify if this is happening in Google Chrome as well.

[vnbaaij]

Can't reproduce it...

This is what I get locally (on Edge, when running the server demo) with the AutoComplete default example and AutoComplete="on":

This is with AutoComplete="off":

(typed some chars already)

or

(no input yet)

[MarvinKlein1508]

@vnbaaij how do you save information into the autofill at all? I will try to reproduce it as well. Perhaps it has something todo with localized versions of Edge.

[vnbaaij]

I think it got in there with another input that I used for filtering a country list (probably from one of the DataGrid examples)

[MarvinKlein1508]

@vnbaaij I can reproduce this in the issue tester with this code:

<EditForm Model="Input">
    <FluentAutocomplete TOption="User"
                        AutoComplete="off"
                        Id="my-users"
                        Label="Users"
                        Class="w-100"
                        Placeholder="Name"
                        OnOptionsSearch="@OnSearchUserAsync"
                        OptionComparer="UserComparer.Instance"
                        OptionText="@(item => $"{item.DisplayName}" )"
                        @bind-SelectedOptions="Input.Users" />
    <FluentValidationMessage For="() => Input.Users" />
</EditForm>

@code {
    public MyInput Input { get; set; } = new();

    private List<User> _filter = new()
    {
        new User { UserId = 1, DisplayName = "Marvin Klein" },
        new User { UserId = 2, DisplayName = "Marvin Large" },
        new User { UserId = 3, DisplayName = "Marvin Mini" },
    };

    private Task OnSearchUserAsync(OptionsSearchEventArgs<User> e)
    {
        e.Items = _filter;
        return Task.CompletedTask;
    }

    public class MyInput
    {
        public IEnumerable<User> Users { get; set; } = [];
    }

    public class User
    {
        public required int UserId { get; set; }
        public required string DisplayName { get; set; }
    }

    public class UserComparer : IEqualityComparer<User>
    {
        public static UserComparer Instance { get; } = new UserComparer();

        public bool Equals(User? x, User? y)
        {
            if (ReferenceEquals(x, y))
            {
                return true;
            }

            if (x is null || y is null)
            {
                return false;
            }

            return x.UserId == y.UserId;
        }

        public int GetHashCode(User obj) => HashCode.Combine(obj.UserId);
    }
}

In my Edge I've added this personal details:

In the issue-tester:

The only difference of this demo and the regular ones from the documentation is the addition of EditForm

[MarvinKlein1508]

It indeed works without an EditForm. But how can I get it to work with an EditForm? I've tried to set autocomplete="off" id="my-form" on the EditForm itself but sadly this doesn't change the behaviour.

[MarvinKlein1508]

This seems to be an issue in vanilla Blazor as well. I've created another issue here: dotnet/aspnetcore#62296

[vnbaaij]

I think it is a case of Edge/Chrome being a bit too pro-active....

If I change the code to have Placeholder="test" instead of Placeholder="Name" of the FluentAutoComplete, the saved info thingy does not pop up (with autocomplete="off) on both the from and the component)

[vnbaaij]

Think this can be closed here as it is not a library issue

[MarvinKlein1508]

@vnbaaij you can leave this one open. Your workaround is working fine for me. I will create a PR to reflect this behaviour in the docs. There are multiple possible placeholders values which all result in this behaviour. Pretty dumb from browser manufacturers. I will create a PR once I get to it.

I am currently working on a large rewrite of a module in our internal app.

[vnbaaij]

I'm closing it as it is not a library issue. We can document the workaround for sure, but is a separate PR and does not warrant an open issue as far as I'm concerned.