Why does Blazor InputSelect behaves differently for string and int values?

Question

Let's say that we have a really simple class with 2 properties, one is an integer and the other one is a string. I want to use EditForm with 2 InputSelect elements that are bind to these properties. The code looks like this:

@page "/test"
@using Microsoft.AspNetCore.Components
@using Newtonsoft.Json

<PageTitle>Test</PageTitle>
<h3>Test form</h3>

<EditForm Model="@_dummy" OnValidSubmit="@TestAsync">
    <DataAnnotationsValidator/>
    <ValidationSummary/>

    <div class="mb-3">
        <label for="string" class="form-label">String</label>
        <InputSelect id="string" @bind-Value="_dummy.StringProp" class="form-select">
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
        </InputSelect>
    </div>

    <div class="mb-3">
        <label for="int" class="form-label">Integer</label>
        <InputSelect id="int" @bind-Value="_dummy.IntProp" class="form-select">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </InputSelect>
    </div>

    <button type="submit" class="btn btn-primary">Start</button>
</EditForm>

@code {
    readonly Dummy _dummy = new();

    private void TestAsync()
    {
        Console.WriteLine("Object state: " + JsonConvert.SerializeObject(_dummy));
    }

    class Dummy
    {
        public string? StringProp { get; set; }
        public int IntProp { get; set; }
    }

}

Here is how it looks like in a web browser:

Why is the string value selected and the integer value isn't?

When I submit this form without interacting with Select element I will get a null for StringProp. That is not intuitive for users since this option is shown as already selected. If I interact with it then the value will be correct.

Also I tried to use the selected attribute on the Integer Option element and it has no effect. I cannot make any value to be pre-selected.

Am I doing something wrong or is this a bug? I am using .NET 6.0

MrC aka Shaun Curtis · Accepted Answer · 2022-04-16 14:00:50Z

2

The default string value is set to null. So the Select shows the first value. Note it only shows it in the UI, it doesn't set it on the model object as no change event has occurred.

The int default value is 0, which is a real number but isn't in the list of options, so nothing is selected because the actual value is not in the list.

You can make the behaviour the same with this:

    class Dummy
    {
        public string StringProp { get; set; } = string.Empty;
        public int IntProp { get; set; } = 0;
    }

This is the coded default behaviour for InputSelect. You may not agree with it, but it's no bug.

If you want your model object to have default values, set them on the object. If you want to force the User to select values do data validation.

answered Apr 16, 2022 at 14:00

MrC aka Shaun Curtis

32.4k3 gold badges27 silver badges56 bronze badges

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

3 Comments

zoran Over a year ago

So if the current value of a property is null, then the first option will be selected regardless of option value. If the value is not null and not present in options then nothing will be selected? If so, do you know if this is documented anywhere?

MrC aka Shaun Curtis Over a year ago

@zoran - not sure it's documented anywhere, but that's the observed behaviour.

Bennyboy1973 Over a year ago

I don't think this is an InputSelect issue. I suspect if you use vanilla html controls, it will be the same. The value properties are in fact strings, not integers,

Collectives™ on Stack Overflow

Why does Blazor InputSelect behaves differently for string and int values?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related