fix: HeaderCellAsButtonWithMenu and ColumnOptions set but no sorting results in no menu shown

[davhdavh]

🐛 Bug Report

fluentui-blazor/src/Core/Components/DataGrid/Columns/ColumnBase.razor.cs

Lines 250 to 253 in e6e151c

	if ((Sortable is true || IsDefaultSortColumn) && (Grid.ResizableColumns || ColumnOptions is not null))
	{
	_isMenuOpen = !_isMenuOpen;
	}

does not call StateHasChanged and thus the menu is never shown.

💻 Repro or Code Sample

<FluentDataGrid RowStyle="@(x => $"height:{(int)DataGridRowSize.Medium}px;")"
                HeaderCellAsButtonWithMenu="true"
                ResizableColumns="true"
                ResizeType="DataGridResizeType.Discrete"
>
    <TemplateColumn TGridItem="TGridItem" Sortable="false" Title="Actions" Align="@Align.End" Width="120px" Filtered="true">
     <ChildContent>
      Hello world
   </ChildContent>
     <ColumnOptions>Column Options</ColumnOptions>
    </TemplateColumn>
</FluentDataGrid>

🤔 Expected Behavior

clicking on TemplateColumn header shows Column Options and resize.

😯 Current Behavior

Nothing happens on click

💁 Possible Solution

Call StateHasChanged after changing property.

[vnbaaij]

Fix with PR mentioned

[davhdavh]

On further investigation, this is not the correct fix for this bug.

There are 4 render states for menu:

• has sort -> Grid.SortByColumnAsync
• has resize -> Grid.ShowColumnResizeAsync
• has column options -> Grid.ShowColumnOptionsAsync
• has multiple -> _isMenuOpen = !_isMenuOpen

    private async Task HandleColumnHeaderClickedAsync()
    {
        if ((Sortable is true || IsDefaultSortColumn) && (Grid.ResizableColumns || ColumnOptions is not null))
        {
            _isMenuOpen = !_isMenuOpen;
        }
        else if ((Sortable is true || IsDefaultSortColumn) && !Grid.ResizableColumns && ColumnOptions is null)
        {
            await Grid.SortByColumnAsync(this);
        }
        else if (Sortable is not true && !IsDefaultSortColumn && ColumnOptions is null && Grid.ResizableColumns)
        {
            await Grid.ShowColumnResizeAsync(this);
        }
  }

-->

 private async Task HandleColumnHeaderClickedAsync()
 {
    var hasSorting = Sortable is true || IsDefaultSortColumn;
    var hasResize  = Grid.ResizableColumns;
    var hasOptions = ColumnOptions is not null;
    var hasMulti   = (hasSorting && hasResize) || (hasSorting && hasOptions) || (hasResize && hasOptions);
    if (hasMulti) { _isMenuOpen = !_isMenuOpen; }
    else if (hasSorting) { await Grid.SortByColumnAsync(this); }
    else if (hasResize) { await Grid.ShowColumnResizeAsync(this); }
    else if (hasOptions) { await Grid.ShowColumnOptionsAsync(this); }
 }

[vnbaaij]

That looks much clearer! Although our style rules will trigger on your formatting 😜

I'll amend the PR.

PR was mergedalready. I'll create a new one.