Blazor [Parameter] not updating input variables

Question

I have a custom component InlineAutocomplete. No matter what I do my pic value and SelectedPIC value are always null when I do validation and unsure why it is. The component does render correctly, but can't get my parameter back with the values set correctly.

Usage as follow:

<InlineAutocomplete TItem="PIC"
                    Value="@pic"
                    Selected="@SelectedPIC"
                    Data="@PICs"
                    Property="@((item) => item.PICNumber)" />

My component:

<div class="inline-autocomplete">
    <input @oninput="(e)=> SuggestItem(e)" type="text" @bind-value="@Value" class="overlap inline-autocomplete-input " />
    <input readonly class="overlap inline-autocomplete-label" value="@_suggestedValue" />
</div>

@code {

    string _value;
    string _suggestedValue;

    [Parameter]
    public string Value
    {
        get => _value;
        set
        {
            if (value == null)
                return;

            _value = value;
        }
    }

    [Parameter]
    public List<TItem> Data { get; set; }

    [Parameter]
    public Func<TItem, string> Property { get; set; }

    [Parameter]
    public TItem Selected { get; set; }

    void SuggestItem(ChangeEventArgs e)
    {

        if (string.IsNullOrEmpty(e.Value.ToString()))
            return;

        Value = e.Value.ToString().ToUpper();

        if (string.IsNullOrEmpty(Value))
        {
            _suggestedValue = string.Empty;
        }
        else
        {
            var selectedItem = Data.Select(Property).FirstOrDefault(x => x.StartsWith(Value, StringComparison.OrdinalIgnoreCase));
            _suggestedValue = !string.IsNullOrWhiteSpace(selectedItem) ? selectedItem : string.Empty;
            Selected = Data.FirstOrDefault(x => string.Equals(Property(x), Value, StringComparison.OrdinalIgnoreCase));
            StateHasChanged();
        }

        // State has changed
        StateHasChanged();
    }
}

Seems to be a generic typed component but there is no @typeparam TItem directive. This does not look like a complete component code sample. I can't see _value or other local values declared — Quango
– Quango, Commented May 26, 2021 at 7:40
can you rename Value property with other as I just though that this word is very frequently used and also in all langauge this is reserved word, so it might be reference some where while given as you. — Ajay2707
– Ajay2707, Commented May 26, 2021 at 10:57
@Quango, it is an incomplete example for the sake of saving space. _value is just a regular field string _value; @Ajay2707 it is normal to name Blazor properties with the uppercase for the property they are meant to imitate. For example Value => value, Class => class, etc... — CorrieJanse
– CorrieJanse, Commented May 26, 2021 at 20:52

CorrieJanse · Accepted Answer · 2021-05-26 20:58:28Z

3

The solution to this was to pass down a function that changes the property in the Parent instead of the Child.

Child:

 [Parameter]
public Action<string, TItem> ValueChanged { get; set; }

...

@code {
     void SomeFunction() {
          ValueChanged(Value, Selected);
     }
}

Parent:

<InlineAutocomplete ... ValueChanged="FireEvent" />

void FireEvent(string stringVal, MyClass c)
{
    // ... Do Something
}

answered May 26, 2021 at 20:58

CorrieJanse

2,5981 gold badge10 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Blazor [Parameter] not updating input variables

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related