AutoComplete NavLink does not wrap full list item

Radzen.Blazor Components
1

How can I add NavLink for whole li of autocomplete. Currently it is only inside the span (red rectangle).

<RadzenAutoComplete @bind-Value=@_itemName Data=@_items TextProperty=Name Style="width: 20rem" Placeholder="Search for item"
InputAttributes=@(new Dictionary<string,object>(){ { "aria-label", "Item Name" }})>
    <Template>
        <NavLink class="flex items-center" href=" /test")>
            <RadzenImage Path="@context.Icon" />
            <RadzenText Text="@context.Name" />
        </NavLink>
    </Template>
</RadzenAutoComplete>

Screenshot

This is the generated html, I want the navlink in li not span

<li role="option" class="rz-autocomplete-list-item" onmousedown="Radzen.activeElement = null"><!--!-->
                            <span><!--!-->
<!--!--><a href="/test" class="flex items-center"><!--!-->    <img src="images/test.png?" class="" id="2WpysbVjtk" alt="image" _bl_f5c3f36d-1205-401b-a0b4-349071e625b1=""><!--!-->
<!--!-->
                <!--!--><p class="rz-text-body1" id="syX5f60hYk" _bl_e21b1d49-3e14-465f-83cd-4cff5fc0ff54="">Test Test</p></a>                            </span><!--!-->
                        </li>
2

Currently you can't. The template is rendered inside a <span> always. Why do you want to get rid of it?

3

It's bad user experience. When a user clicks inside item li but outside span, the autocomplete closes and nothing happens, does not get navigated to the desired page.

4

The li has padding. This is where the user is clicking. The span itself has no padding and shouldn't trigger any events. You can try removing the padding of the li.

Also I would reconsider your UX entirely - navigating from an AutoComplete isn't great UX either. What if the user enters a custom value which isn't in the completion list?