fix: anchored HorizontalPosition in FluentMenu does not always work inside a splitter panel

[adamint]

🐛 Bug Report

The gif in this comment displays the issue - in the second column header in a data grid inside a fluent splitter panel, if you have a menu that is anchored on the column header, its horizontal positioning will be messed up.

💻 Repro or Code Sample

<FluentSplitter Orientation="Orientation.Vertical" BarSize="6" Panel1MinSize="15%" Panel2MinSize="50px" Style="height: 100%">
    <Panel1>
        <div class="demopanel">
            <p>Panel1</p>
        </div>
    </Panel1>
    <Panel2>
        <div style="width: 700px; height: 400px; overflow-y: scroll; overflow-x: scroll;">
            <FluentDataGrid
                ResizableColumns="true"
                Items=@_items
                Virtualize="true"
                ItemSize="54">
                <ChildContent>
                    <PropertyColumn TGridItem="SampleGridData" TProp="string" Property="@(c => c.Item1)" Sortable="true" Title="Test"/>

                    <PropertyColumn TGridItem="SampleGridData" TProp="string" Property="@(c => c.Item1)" Sortable="true" Title="Test">
                        <HeaderCellItemTemplate>
                            <FluentButton Style="width: 100%" Id="@_columnId" Appearance="Appearance.Stealth" class="col-sort-button" @onclick="@(() => _isMenuOpen = !_isMenuOpen)">
                                Column header
                            </FluentButton>

                            <FluentMenu Anchor="@_columnId" @bind-Open="@_isMenuOpen">
                                <FluentMenuItem>Option1</FluentMenuItem>
                                <FluentMenuItem>Option2</FluentMenuItem>
                            </FluentMenu>
                        </HeaderCellItemTemplate>
                    </PropertyColumn>
                </ChildContent>
                <EmptyContent>
                    <FluentIcon Value="@(new Icons.Filled.Size24.Crown())" Color="@Color.Accent"/>&nbsp; Nothing to see here. Carry on!
                </EmptyContent>
            </FluentDataGrid>
        </div>
    </Panel2>
</FluentSplitter>

@code {
    private bool _isMenuOpen;
    private readonly string _columnId = $"column-header{Guid.NewGuid():N}";

    public record SampleGridData(string Item1, string Item2, string Item3, string Item4);

    IQueryable<SampleGridData>? _items = Enumerable.Empty<SampleGridData>().AsQueryable();

    private IQueryable<SampleGridData> GenerateSampleGridData(int size)
    {
        SampleGridData[] data = new SampleGridData[size];

        for (int i = 0; i < size; i++)
        {
            data[i] = new SampleGridData($"value {i}-1", $"value {i}-2", $"value {i}-3", $"value {i}-4");
        }
        return data.AsQueryable();
    }
    
    protected override void OnInitialized()
    {
        _items = GenerateSampleGridData(5000);
    }
}

🤔 Expected Behavior

Both column header menus should be anchored at the beginning of the component.

😯 Current Behavior

💁 Possible Solution

🔦 Context

dotnet/aspire#5266 (comment)

[vnbaaij]

As strange as it sounds, this can be solved by adding HorizontalPosition="HorizontalPosition.End" to the FluentMenu component tag. There seems to be a logical error in the web components script in the part that calculates the transform values.

I've verified this to work on the Aspire side:

[vnbaaij]

We could also pass through the HorizontalViewportLock to the anchored region (and set it to false) and set HorizontalScaling="AxisScalingMode.Anchor" on the anchored region. That way the menu will always be set to the same with as the button in the header (as that is the anchor). It would look like this:

Thoughts?

[adamint]

We could also pass through the HorizontalViewportLock to the anchored region (and set it to false) and set HorizontalScaling="AxisScalingMode.Anchor" on the anchored region. That way the menu will always be set to the same with as the button in the header (as that is the anchor). It would look like this:

Thoughts?

I’m of the opinion that more/all anchored region properties should be accessible through Menu/Select, so I do like this idea.

[vnbaaij]

Created PR #2579 for the extra parameter pass through