Wrong formatting for nested razor code in .razor files

[MarvinKlein1508]

I have an InputSelect component which will be displayed based on a condition. Within the InputSelect component, I'm generating all available options using an @foreach based on an IEnumerable .

VS Formats my code like this:

I would expect the code to be formatted like this:

@if (rule.Element is not null)
{
    <InputSelect @bind-Value="rule.ComparisonOperator" id="@($"rule-compare-{rule.GetHashCode()}")" class="form-select" aria-placeholder="Operator">
        @foreach (ComparisonOperator item in GetAllowedOperators(rule.Element))
        {
            <option value="@item">@item</option>
        }
    </InputSelect>
    <label for="@($"rule-compare-{rule.GetHashCode()}")">Operator</label>
}

Instead I get this:

@if (rule.Element is not null)
{
    <InputSelect @bind-Value="rule.ComparisonOperator" id="@($"rule-compare-{rule.GetHashCode()}")" class="form-select" aria-placeholder="Operator">
        @foreach (ComparisonOperator item in GetAllowedOperators(rule.Element))
    {
        <option value="@item">@item</option>
    }
</InputSelect>
    <label for="@($"rule-compare-{rule.GetHashCode()}")">Operator</label>
}

Note all code is also wrapped around by another null check

[davidwengier]

@MarvinKlein1508 what version of Visual Studio are you running? I'm trying to reproduce this issue, and both 17.5 and 17.6 Preview 1 are formatting the code as per your expected case. You mentioned that "all code is also wrapped around another null check", and even when I add another level of @if nesting, things still seem to work fine. I wonder if there is something specific about some other contents in your files that is causing this.

Is it possible for you to try to create a minimal repro, in a brand new project, so that you'll be able to share the entire file contents without sharing any of your code? Alternatively, if you log this issue as a VS feedback item (Help -> Send Feedback -> Report a Problem) you can upload the project and it will only be visible to Microsoft employees.

[MarvinKlein1508]

@davidwengier I'm using VS 17.6 Preview 1. This issue persists within my FormularPortal project.
https://github.com/MarvinKlein1508/FormularPortal/blob/a6a9e4ef66d0d7979bc6601759348eef0c13d048/FormularPortal/Components/Admin/Forms/RuleEditor.razor#L52

https://github.com/MarvinKlein1508/FormularPortal/blob/a6a9e4ef66d0d7979bc6601759348eef0c13d048/FormularPortal/Components/Admin/Forms/RuleEditor.razor#L75

[davidwengier]

Thanks! Will clone that and give it a go

[davidwengier]

Okay, I can repro it, thanks! Definitely something to do with the levels of nesting. Interesting that the </InputSelect> on line 52 is wrong, but the one on line 41 is okay. That one extra nesting must be hitting some edge case, so thank you so much for finding the issue.

[MarvinKlein1508]

@davidwengier I believe it has something todo with the combination of component and @if blocks. Perhaps because I'm using both syntax within the DropZone component which is wrapped inside an if statement.

I'm looking forward for a fix for this. This is bothering me since the first introduction of the first new editor in .NET 5.

In my experience I can tell that it gets worse as more nested components and if blocks I use.

[XorZy]

Can reproduce on VSCode.

@if (true)
{
    <div>
        <p>Test</p>
    </div>
}

becomes

@if (true)
{
    <div>
    <p>Test</p>
</div>
}

Would be nice to have a fix since this completely destroys formatting for larger components, especially if you have "format on save" enabled.

Additionally a "Request textDocument/rangeFormatting failed." error occasionally shows up when formatting such a document.

[pgregorynz]

I am experiencing the same issue as @XorZy Where the indenting is completely wrong when HTML is nested

This is still an issue 5 months on.