[Bug]: Autocomplete mulitiple selection mode disabled/enabled rendering issue

[blenke]

Blazorise Version

1.6 , 1.7

What Blazorise provider are you running on?

Bootstrap5

Link to minimal reproduction or a simple code snippet

<Div>
    <Row>
        <Column ColumnSize="ColumnSize.Is1">
           <Check @bind-Checked=@Disabled> Disabled</Check>
        </Column>
        <Column ColumnSize="ColumnSize.Is4">
            <Autocomplete TItem="Country"
                          TValue="string"
                          Data="@Countries"
                          TextField="@(( item ) => item.Name)"
                          ValueField="@(( item ) => item.Iso)"
                          Placeholder="Search..."
                          SelectionMode="AutocompleteSelectionMode.Multiple"
                          FreeTyping
                          Disabled="@Disabled"
                          @bind-SelectedValues="multipleSelectionData"
                          @bind-SelectedTexts="multipleSelectionTexts">
            </Autocomplete>
        </Column>
    </Row>

</Div>

<Field Horizontal>
    <FieldBody ColumnSize="ColumnSize.Is12">
        Selected Values: @string.Join(',', multipleSelectionData)
    </FieldBody>
    <FieldBody ColumnSize="ColumnSize.Is12">
        Selected Texts: @(multipleSelectionTexts == null ? null : string.Join(',', multipleSelectionTexts))
    </FieldBody>
</Field>

@code {
    bool Disabled = false;
    public class Country
    {
        public string Name {get; set; }
        public string Iso { get; set; }
    }

    public IEnumerable<Country> Countries ;

    protected override async Task OnInitializedAsync()
    {
        List<Country> cl = new();
        cl.Add(new Country { Name = "Netherlands", Iso = "NL" });
        cl.Add(new Country { Name = "Belgium", Iso = "BE" });
        cl.Add(new Country { Name = "Germany", Iso = "DE" });
        cl.Add(new Country { Name = "France", Iso = "FR" });
        cl.Add(new Country { Name = "United Kingdom", Iso = "UK" });
        cl.Add(new Country { Name = "Italy", Iso = "IT" });
        cl.Add(new Country { Name = "Spain", Iso = "ES" });
        cl.Add(new Country { Name = "Portugal", Iso = "PT" });
        cl.Add(new Country { Name = "Greece", Iso = "GR" });
        Countries= cl;
        
        multipleSelectionData = new List<string>() { Countries.ElementAt(1).Iso, Countries.ElementAt(3).Iso };
        await base.OnInitializedAsync();
    }

    List<string> multipleSelectionData;
    List<string> multipleSelectionTexts;
}   

Steps to reproduce & bug description

Add an autocomplete control with SelectionMode="AutocompleteSelectionMode.Multiple" . Add a checkbox to disable the autocomplete. Add some selections and then disable the autocomplete by selecting the checkbox.

Note that the x's get a different background color then the text. In this case when using bootstrap 5 the text will have a gray background and the x will remain blue. Additionally the x looks like its still active when moving the mouse over the x it will show the mouse hand pointer.
When loading the page with the control disabled it all looks as expected, just switching disabled on or off will show a rendering issue.

What is expected?

the x should always have the same text and background color as the text
the mouse pointer should not be a hand when the autocomplete is disabled

What is actually happening?

background color is no longer the same after disabling the autocomplete

What browsers do you see the problem on?

Chrome, Microsoft Edge

Any additional comments?

No response