Using Blazor <InputSelect> gives warning: Element 'option' cannot be nested inside element 'p'

Question

I am trying to follow the pattern from Microsoft's site: https://docs.microsoft.com/en-us/aspnet/core/blazor/forms-validation?view=aspnetcore-3.0 here is a snippet of their code ...

<p>
        <label for="classification">Primary Classification: </label>
        <InputSelect id="classification" @bind-Value="@starship.Classification">
            <option value="">Select classification ...</option>
            <option value="Defense">Defense</option>
            <option value="Exploration">Exploration</option>
            <option value="Diplomacy">Diplomacy</option>
        </InputSelect>
</p>

I get a warning on each of my 'option' tags saying they cannot be nested inside element 'p'. Their example above gives the same warning :p

How do I eliminate that warning? I am using VS Pro 2019 Ver 16.2.0 Preview 3.0 updated 6/26/2019. Their example is from 06/13/2019 so also pretty recent.

Also their example is a .cshtml file but most examples I see use .razor extension. I tried changing mine to .cshtml and got the same warning. Which should I use or does it not matter?

I can compile and run Microsoft's Starship sample without warnings in my local machine ( 3.0.100-preview6-012264 ). Also it runs at blazorfiddle but there I can't see logs I guess. — dani herrera
I can confirm the warning. I wouldn't lose sleep over this, apparently the InputSelect isn't reecognized by the html validator (yet). — Henk Holterman

enet enet · Accepted Answer · 2019-07-01T18:57:23

This is a known issue you should just ignore... See: https://github.com/aspnet/AspNetCore/issues/8166

View the .g.cs files in your project, and see if the compiler is creating the render tree properly. Perhaps the issues lies there...

Hope this helps...

Using Blazor <InputSelect> gives warning: Element 'option' cannot be nested inside element 'p'

1 Answers