SelectList not executing the callback set for SelectedValueChanged

[baltazarO]

Blazorise Version

1.5.3

What Blazorise provider are you running on?

None

Link to minimal reproduction or a simple code snippet

<SelectList DefaultItemDisabled DefaultItemHidden=true DefaultItemText="Pick a data type" TItem="DataType" Data="Foo.DataTypes" TValue="int" ValueField="@((x) => x.ID)" TextField="@((x) => x.NameOfType)" SelectedValue="Foo.Bar.DataTypeID" SelectedValueChanged="(e) => TheDataTypeChanged(e)"/>

void TheDataTypeChanged(int newValue) { Foo.Bar.DataTypeID = newValue; Foo.CallStateHasChanged(); }

Steps to reproduce

1. Set a breakpoint in the "TheDataTypeChanged" method
2. First you need to create a class called Foo that has a list of datatypes and a Bar object that is = new Bar();
3. Make sure datatypes is initialized (DataType class has an ID and a Name)
4. Choose a datatype from the select list dropdown

What is expected?

I should hit the breakpoint in the "TheDataTypeChanged" method

What is actually happening?

Never hits the breakpoint.

What browsers do you see the problem on?

Chrome

Any additional comments?

No response

[David-Moreira]

I don't see a visible issue with your code. There seems to be no issue with binding by going to the docs : https://blazorise.com/docs/extensions/selectlist

May I ask that you provide a more complete piece of code? At least the whole component or page? With everything that's required to run your reproducible successfully? Thanks!

[github-actions[bot]]

Hello @baltazarO, thank you for your submission. The issue was labeled "Status: Repro Missing", as you have not provided a way to reproduce the issue quickly. Most problems already solve themselves when isolated, but we would like you to provide us with a reproducible code to make it easier to investigate a possible bug.

[lfoust]

I am hitting this same issue. I have uploaded a complete example based on the repro posted above. Project attached.

SelectListRepro.zip

[sabrijumbo]

I am having the same problem with latest version of Blazorise. @David-Moreira could you confirm if this persist and needs to be addressed?

In my case everything is working when I change the selection with keyboard but mouse selection never do the trigger. Sharing my example code below.

SelectList

    <SelectList TItem="TModel" TValue="TType"
            Data="@Entities"
            TextField="@TextField"
            ValueField="@ValueField"
            SelectedValue="@SelectedValue"
            SelectedValueChanged="@this.ViewModel.OnSelectedValueChanged"
            DefaultItemText="@DefaultItemText"
            DefaultItemHidden="@DefaultItemHidden"
            Disabled="@Disabled">
        <Feedback>
            <ValidationError />
        </Feedback>
    </SelectList>

Event

    public virtual Task OnSelectedValueChanged(TType value)
    {
        this.SelectedValue = value;

        return Task.CompletedTask;
    }

Blazorise Version

<ItemGroup>
	<PackageReference Include="Blazorise.Bootstrap" Version="1.7.5" />
	<PackageReference Include="Blazorise.Charts" Version="1.7.5" />
	<PackageReference Include="Blazorise.Components" Version="1.7.5" />
	<PackageReference Include="Blazorise.Icons.FontAwesome" Version="1.7.5" />
	<PackageReference Include="Blazorise.RichTextEdit" Version="1.7.5" />
</ItemGroup>

[David-Moreira]

Hello,

The callback is not invoked because it's not currently supported to bind complex types for the TValue as far as I know/remember.

Certainly Blazorise can possibly improve the experience with automatically binding complex types, but unfortunately as far as I remember this is still a known limitation because blazorise uses native html select and I believe there were limitations with being able to properly map natively as it's just not supported by the browser, correct me if I'm wrong @stsrki

Please refer to the section How to bind Complex Type? in the following blog post https://blazorise.com/blog/how-to-handle-select-with-primitive-and-complex-types in order to properly bind your complex type. Basically you'll need to make use of some value type that has a unique identifier that maps back to the corresponding complex type.

i.e untested code, but should be something along these lines:

    <SelectList TItem="TModel" TValue="int"
            Data="@Entities"
            TextField="(item) => item.Description"
            ValueField="(item) => item.Id"
            SelectedValue="@SelectedValue"
            SelectedValueChanged="@(x) => SelectedComplexType = entities.First(entity => entity.Id == x)"
            DefaultItemText="@DefaultItemText"
            DefaultItemHidden="@DefaultItemHidden"
            Disabled="@Disabled">
        <Feedback>
            <ValidationError />
        </Feedback>
    </SelectList>

https://blazorise.com/docs/extensions/selectlist

[stsrki]

Certainly Blazorise can possibly improve the experience with automatically binding complex types, but unfortunately as far as I remember this is still a known limitation because blazorise uses native html select and I believe there were limitations with being able to properly map natively as it's just not supported by the browser, correct me if I'm wrong @stsrki

Yes, that is correct. The TValue must map to a known primitive type in order for it to be able to render to a native HTML value.

Thanks @David-Moreira

[zl-aric]

Why not add a TKey attribute for the complex type?