vikramlearning / blazorbootstrap

An Enterprise-class Blazor Bootstrap Component library built on the Blazor and Bootstrap CSS frameworks.
https://docs.blazorbootstrap.com/
Apache License 2.0
670 stars 32 forks source link

Autocomplete does not call ValueChanged on blur #225

Closed otte845 closed 1 year ago

otte845 commented 1 year ago

Autocomplete component does not change the bound value unless you pick one of the suggestions (doesn't work like a normal text input), it looks like it doesn't call ValueChanged on blur

Tested by copying the "Client Side Data" example on the "NET7.BlazorServerApp" template

gvreddy04 commented 1 year ago

@otte845 Thank you for trying the BlazorBootstrap components. The behavior you see is expected. The user has to select something from the list. Otherwise, the AutoComplete component will not know what action to perform or what to select from the list.

otte845 commented 1 year ago

I understand, I was trying to use the autocomplete component in an invoice form where the user can write the client's name (while searching with the autocomplete), if the client is not registered the user can write the other fields (address, etc.) but if one client from the autocomplete list is selected, the other fields become read-only with the client's data and the focus goes to the next invoice fields. I'll just fork the control to expose the onchange event then

gvreddy04 commented 1 year ago

@otte845 We have an OnChanged event on AutoComplete component. Check all the examples here with source code: https://demos.blazorbootstrap.com/autocomplete.

<AutoComplete @bind-Value="customerAddress.CustomerName"
                          TItem="Customer2"
                          DataProvider="CustomersDataProvider"
                          PropertyName="CustomerName"
                          Placeholder="Search a customer..."
                          OnChanged="(Customer2 customer) => OnAutoCompleteChanged(customer)" />

...

    private void OnAutoCompleteChanged(Customer2 customer)
    {
        // TODO: handle your own logic

        // NOTE: do null check
        Console.WriteLine($"'{customer?.CustomerName}' selected.");
    }

I hope this will help.