EditForm within a table does not render

Question

Blazor vRC1

There appears to be subtleties of the EditForm component, where it will not render its contents in certain markup situations. For example, when an EditForm is placed within the <table> tags, nothing happens.

<table>
<thead>...</thead>
<EditForm Model="MyModel">
    @foreach(var item in MyModel.Items)
    {
        <tr><td>....</td></tr>
    }
</EditForm>
</table>

However wrapping the <table> with the EditForm everything renders as expected.

<EditForm Model="MyModel">
<table>
<thead>...</thead>   
    @foreach(var item in MyModel.Items)
    {
        <tr><td>....</td></tr>
    }
</table>
</EditForm>

I'm fine with the latter, however if the rendering engine is unable to handle the first example, it would be nice if it'd throw some sort of error to warn the developer the situation is not supported.

Answer 1

Avoiding making form as a child element of a table . As a workaround , you can try add a <div> and move EditForm inside it(although it's not correct to put div nested in form ) , or you can put form inside table cell(inside <td> tag) .

<table>
    <thead>...</thead>
    <div>
        <EditForm Model="MyModel">
            @foreach(var item in MyModel.Items)
            {

            }
        </EditForm>
    </div>
</table>

Or :

<table>
    <thead>...</thead>
    <tr>
        <td>
            <EditForm Model="MyModel">
                @foreach(var item in MyModel.Items)
                {

                }
            </EditForm>
        </td>
    </tr>
</table>

But of course , it's better to have your table inside form .