Blazor datalist onchange event not firing

Question

I have implemented an onchange in a datalist in my .razor component in my Blazor Server / .NET Core 3.1. application.

In the browser when I select an option from the datalist the OnChanged method does not fire. My break-point in OnChanged is not hit.

I want it to fire and then use OnChanged to populate the <select name="EventsInType">

I have added a <button element to the page with @onclick="OnClicked" as an example of something that works - this does fire and my breakpoint in OnClicked is hit.

I have tried the answer as suggested here but it does not work.
Also When i change the syntax from @onchange="OnChanged" to onchange="@OnChanged" i get the following:

Cannot convert method group 'OnChanged' to non-delegate type 'object'. Did you intend to invoke the method?

I would have thought this should be simple enough with Blazor, is there something that I do not understand here?

Here is the code:

@page "/"
@inherits EventDetailsBase
Event Type
<input autoComplete="on" list="EventTypes" placeholder="Search event types..." />
<datalist @onchange="OnChanged" id="EventTypes">
    @foreach (var eventType in EventTypes)
    {
        <option value="@eventType.Name">@eventType.Name</option>
    }
</datalist>

<select name="EventsInType">

</select>

<button class="btn btn-primary" @onclick="OnClicked">
    Click Me
</button>

@code {
    private void OnClicked(MouseEventArgs e)
    {
        var test = "";
    }

    private void OnChanged(ChangeEventArgs args)
    {
        //POPULATE HTML SELECT "EventsInType" HERE
    }
}

The base class is probably irrelevant but here it is anyway:

    public class EventDetailsBase : ComponentBase
    {
        [Inject]
        public IMyService MyService { get; set; }
        public List<EventType> EventTypes { get; set; } = new List<EventType>();

        protected override async Task OnInitializedAsync()
        {
            EventTypes = await MyService.GetEventTypes();

        }

        public void GetEventsByType(ChangeEventArgs changeEventArgs)
        {
            var test = changeEventArgs;
        }
    }

** Note i put the OnClicked and OnChanged in the .razor component @code for simplicity, eventually i will move to base class.

What if you use a lambda instead : @onchanged="e => OnChanged(e)" — agua from mars
@aguafrommars Take a look at the accepted answer from enet which worked for me. It makes sense because it is the input that changes. (Also, I had tried the lambda previously but didn't work..) Thanks — fourbeatcoder

enet enet · Accepted Answer · 2020-01-30T13:38:58

I think it should be like this:

<input @onchange="OnChanged" autoComplete="on" list="EventTypes" placeholder="Search event types..." />
<datalist id="EventTypes">
    @foreach (var eventType in EventTypes)
    {
        <option value="@eventType.Name">@eventType.Name</option>
    }
</datalist>

You can also use this form of binding on the input element: @bind="eventType.Name" instead of the change event. Note that using a change event does not result in two-way binding...

Blazor datalist onchange event not firing

1 Answers