AutoComplete not showing results pane

Radzen.Blazor Components
1

Hi there,

I'm new to Radzen and Blazor, and trying to add the RadzenAutoComplete component to my application.

I can't get the autocomplete results to show after typing a value into the input.

My application is running on .NET 8 and I'm using the code below.

<div>
    <RadzenAutoComplete
        @bind-Value=@searchValue
        Data=@fakeDataList
        TextProperty="Name"
        Placeholder="Search..."
        FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
    />
</div>
@code {
    string searchValue;
    IEnumerable<FakeData> fakeDataList;
    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        fakeDataList = new List<FakeData>
        {
            new FakeData { Id = 1, Name = "Item 1" },
            new FakeData { Id = 2, Name = "Item 2" },
            new FakeData { Id = 3, Name = "Item 3" },
            new FakeData { Id = 4, Name = "Item 4" },
            new FakeData { Id = 5, Name = "Item 5" }
        };
    }
    public class FakeData
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
}

I'm able to recreate this code within the AutoComplete demo and it runs as expected, so I'm not sure what the issue is.

I also included screenshots of the component being used in the demo and my running application respectively

image

image

In my App.razor I make sure to specify the rendermode, so I don't think that's my issue, but I won't rule it out.

@using Microsoft.AspNetCore.Components.Web
@using Radzen.Blazor

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <base href="/"/>
        <link rel="icon" type="image/png" href="favicon.png"/>
        <link rel="stylesheet" href="project.styles.css"/>
        <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
        <RadzenTheme Theme="pts" @rendermode="@RenderMode.InteractiveServer" />
        <HeadOutlet/>
    </head>
    <body>
    <Routes @rendermode="@RenderMode.InteractiveServer"/>
        <script src="_framework/blazor.web.js"></script>
        <script src="_content/Radzen.Blazor/Radzen.Blazor.js?v=@(typeof(Radzen.Colors).Assembly.GetName().Version)"></script>
    </body>
</html>

I'd appreciate any feedback or comments in regards to this, thanks!

2

Hi @Cassidy_M,

Your code looks correct. Just make sure this isn't a rendering mode problem can you try adding a RadzenButton beside the auto complete and testing whether it would fire its Click event?

3

@korchev I updated my code to add a button that would show a notification with the Click event and the button worked perfectly. The autocomplete still shows no results.

<RadzenButton Click=@OnSave Text="Save" />

@code {
    void OnSave()
    {
        NotificationService.Notify(NotificationSeverity.Success, "Save", "Save button clicked");
    }
}

image
image1156×262 6.34 KB

Untitled video - Made with Clipchamp

4

I think I've found the answer. Our app's Content-Security-Policy has a directive that's blocking the results pane pop event from firing because the event violates the "script-src 'self' 'unsafe-eval' directive.

The event in question is oninput="Radzen.openPopup(this.parentNode, 'popupavGEgB7vlE', true)" I assume.

5

For anyone else encountering this error, here's a similar post in the forum that I found. My issue was indeed our Content Security Policy configuration and not a Radzen issue.