Blazor with maui can not use <InputSelect> or <select>

[hy999]

Description

1,when I write this code:

<InputSelect>
    <option value="0">test</option>
<InputSelect>

the application print "An unhandled error has occurred."

2,When I try to use <select> label in the page, It is dosen't work.

Steps to Reproduce

1,Open a page

2,Add the Select like:

<InputSelect>
    <option value="0">test</option>
<InputSelect>

or

<select>
    <option value="0">test</option>
<select>

They are dosen't work

Version with bug

Preview 12 (current)

Last version that worked well

Unknown/Other

Affected platforms

I was not able test on other platforms

Affected platform versions

10.0.19041.0

Did you find any workaround?

none

Relevant log output

No response

[mkArtakMSFT]

This may be caused by the fact that there is no a wrapping Form element and that may be causing a hidden exception.
@SteveSandersonMS I vaguely remember that we had an issue saying that Input components can't be used without Form element. Should we dupe this with that?

[hy999]

Thanks,I will try it.

[hy999]

It is also bad,but，I have an inconvenient way to fix it
my code is：

<li class="w-50 list-group-item">
     <select @bind=@DotNetVersion class="form-select form-select-sm">
                   <option value="6.0">推荐:6.0</option>
                   <option value="5.0" >5.0</option>
                   <option value="3.1" >3.1</option>
                   <option value="3.0">3.0</option>
                   <option value="2.2" >不推荐:2.2</option>
                   <option value="2.1">不推荐:2.1</option>
                   <option value="2.0">不推荐:2.0</option>
     </select>
</li>

when it run,do this:
1,click the selector
2,keydown the "Enter"
and then,you can select it.

It is very very inconvenient

[davidalucas]

I'm seeing a similar problem in the latest preview, running VS Enterprise 2022 17.1.0 Preview 4.0, debugging for a Windows machine targeting net6.0-windows10.0.19041:

@page "/newsurvey"
@using MauiBlazorAppTest.Data

<EditForm Model="@survey" OnInvalidSubmit="@StartSurvey">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <p>
        <label class="form-label">Derivative
            <InputSelect @bind-Value="survey.Derivative" class="form-select">
                <option selected>Select the derivative...</option>
                <option value="Derivative1">First Derivative</option>
                <option value="Derivative2">Second Derivative</option>
                <option value="Derivative3">Third Dervative</option>
            </InputSelect>
        </label>
    </p>
    
    <button type="submit" class="btn btn-primary">Start Survey</button>
</EditForm>

@code {

    private SurveyModel survey = new() { };

    private void StartSurvey()
    {
		//start the survey
    }
}

This page itself renders correctly, but the dropdown doesn't respond when I click on it:

As hy999 mentioned, it does respond to other events, such as selecting the element and pressing [Enter] to make the dropdown render, as well as the up and down arrow keys to go through the options. It seems to be isolated to the onClick event.

[TanayParikh]

2,Add the Select like:

<InputSelect>
    <option value="0">test</option>
<InputSelect>

or

<select>
    <option value="0">test</option>
<select>

They are dosen't work

InputSelect will need to be within an EditForm as Artak mentioned above. Also, you'll need to use closing tags on the third line of each example (</InputSelect> / </select>). After making these changes, it's working as expected.

<select>
    <option value="0">test</option>
    <option value="1">test2</option>
    <option value="2">test3</option>
</select>

<EditForm Model="model">
    <InputSelect @bind-Value="model.Vehicle">
        @foreach (var value in Enum.GetValues(typeof(Vehicle)))
        {
            <option>@value</option>
        }
    </InputSelect>
</EditForm>

@code {
    Model model = new Model();

    class Model
    {
        public Vehicle Vehicle { get; set; }
    }

    enum Vehicle
    {
        Car,
        Truck,
        Van,
        Bike
    }
}

@davidalucas I tried repro'ing your issue, but it's working fine for me (at least on iOS). Are you experiencing the issue specifically on Windows or other platforms as well? Are you able to provide a minimal, public, github repository app that reproduces this issue.

Simulator.Screen.Recording.-.iPad.mini.6th.generation.-.2022-01-28.at.12.23.43.mp4

[FelipeCostaGualberto]

Hello,

I'm having the same issue. This issue only happens in 'Windows Machine'. It works fine in Android / iOS.

A code as simple as below renders, but when I click in the select element, the select list doesn't expand. Truth to be told, the list just blinks (opens and then close immediately, I can't even see if the items were rendered in the list).
I'm trying it in a brand new .NET MAUI Blazor App, Visual Studio 2022 Version 17.1.0 Preview 4.0

<select>
    <option value="0">test</option>
    <option value="1">test2</option>
    <option value="2">test3</option>
</select>

[denisalibasic]

Hello,

I have same issue as the Felipe on the "Windows Machine". When i click on the element, list just flashes and closes.
Tried inputSelect and select (same problem). It is inside of EditForm
Also working on new .net MAUI blazor app.

<InputSelect class="form-control" @bind-Value="model.WorkoutOwnership">
@foreach (var ownership in Enum.GetValues(typeof(OwnershipEnum)))
{
<option>@ownership</option>
}
</InputSelect >

[Eilon]

When i click on the element, list just flashes and closes.

That sounds like this WebView2 bug, which repros in MAUI on Windows: MicrosoftEdge/WebView2Feedback#1693

Try clicking the dropdown and then pressing Alt+Down on the keyboard and that will open it. (That's just a workaround - the actual bug is being fixed by the WebView2/WinUI team.

[FelipeCostaGualberto]

Thanks for the workaround and I'm glad it is being fixed.

[Laftek]

What about MacOS and Android? Does anybody know if its working there? Thanks.