Bug: FluentAutocomplete cannot close selected item

[brzozasr]

🐛 Bug Report

I have an issue with the FluentAutocomplete component. I cannot close the selected item by clicking on the cross and the browser tools throw the error: "Blocked aria-hidden on a element because the element that just received focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus."

Logs

Blocked aria-hidden on a element because the element that just received focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden. <svg style=​"width:​ 12px;​ fill:​ var(--accent-fill-rest)​;​ cursor:​ pointer;​ margin:​ 2px 0px 0px 2px;​" focusable=​"true" tabindex=​"0" role=​"button" viewBox=​"0 0 24 24" aria-hidden=​"true">​<title>​Remove 4232941110 - GBG_39 T2S_42/6_WCB_14​</title>​<path d=​"m4.4 4.55.07-.08a.75.75 0 0 1 .98-.07l.08.07L12 10.94l6.47-6.47a.75.75 0 1 1 1.06 1.06L13.06 12l6.47 6.47c.27.27.3.68.07.98l-.07.08a.75.75 0 0 1-.98.07l-.08-.07L12 13.06l-6.47 6.47a.75.75 0 0 1-1.06-1.06L10.94 12 4.47 5.53a.75.75 0 0 1-.07-.98l.07-.08-.07.08Z">​​​

<FluentAutocomplete TOption="Data"
                    AutoComplete="off"
                    Autofocus="true"
                    Label="Select item"
                    Width="400px"
                    MaxAutoHeight="250px"
                    Placeholder="Write name"
                    OnOptionsSearch="@OnSearchAsync"
                    SelectedOptionsChanged="@(list => OnSelectWellChangeAsync(list))"
                    Multiple="true"
                    MaximumSelectedOptions="1"
                    MaximumOptionsSearch="int.MaxValue"
                    OptionText="@(item => item.Name)"
                    OptionValue="@(item => item.No)"
                    SelectedOptions="@selectedItems" />

🌍 Your Environment

• OS & Device: Windows 10 PC
• Browser Browser: Microsoft Edge for Business, Version 128.0.2739.67 (Official build) (64-bit)
• .NET and Fluent UI Blazor library Version 4.10.0]

[vnbaaij]

It s not clear what the issue is and when this happens. Please provide more screenshots with annotations.

Also, supply reproduction code we can actually run or point to a sample that shows the issue...

Please supply us with ready-to-run reproduction code in the form of something we can copy/paste, a (zipped) project structure or a GitHub repository.

We do not have capacity to craft or compose a reproduction for every issue that gets raised.

If no code or repository is provided, this issue will be closed in 3 days

Help us to help you. Thanks.

[brzozasr]

Thank you for you response.
The same issue is on the page (https://www.fluentui-blazor.net/Autocomplete).
Please see screenshot:

However, in my case, I cannot deselect (close the selected item) by clicking the cross and have to refresh the page

[dvoituron]

That will be fixed in the next Release. See #2648

[brzozasr]

Thank you