fix: FluentOverflow does not fit to container when ChildContent is modified #2225
Description
🐛 Bug Report
When using FluentOverflow with FluentBadge and modifying badge values, the FluentOverflow component does not update it's width.
💻 Repro or Code Sample
<button id="myPopoverButton" style="width: 200px; height: 30px; overflow-x: visible; border-width: 1px; border-radius: 4px; box-sizing: content-box; padding: 4px;" @onclick="() => _showPopover = !_showPopover">
<FluentOverflow Style="width: 100%;">
<ChildContent>
@foreach(var item in categoryItems)
{
<FluentOverflowItem Style="background-color: #ffd800; border-radius: 4px;">
<FluentBadge Appearance="Appearance.Lightweight">@item.Name</FluentBadge>
</FluentOverflowItem>
}
</ChildContent>
<MoreButtonTemplate >
<FluentBadge Appearance="Appearance.Lightweight" Style="width: 32px; border-radius: 4px; background-color: #ffd800;">
@($"+{context.ItemsOverflow.Count()}")
</FluentBadge>
</MoreButtonTemplate>
</FluentOverflow>
</button>
<FluentPopover AnchorId="myPopoverButton" Style="width: 300px" @bind-Open="_showPopover">
<Body>
<FluentGrid Justify="JustifyContent.FlexStart" Spacing="3">
<FluentGridItem xs="11">
<FluentSortableList Items="categoryItems" OnUpdate="@SortList" Style="width: 100%;">
<ItemTemplate>
<FluentTextField @bind-value="@context.Name" Minlength="4" Style="width: 80%; margin-right: 15px;"></FluentTextField>
<FluentIcon Value="@(new Icons.Regular.Size16.ChevronUpDown())" />
</ItemTemplate>
</FluentSortableList>
</FluentGridItem>
<FluentGridItem xs="11">
<FluentButton Appearance="Appearance.Stealth" OnClick="@Save">
<FluentIcon Value="@(new Icons.Regular.Size28.Save())" />
</FluentButton>
</FluentGridItem>
</FluentGrid>
</Body>
</FluentPopover>
@code
{
protected string ClassValue => "customOverflow";
protected string CategoryButton => "categoryButton";
bool _showPopover;
[Parameter]
public ObservableCollection<string> InitialItems { get; set; }
[Parameter]
public EventCallback<ObservableCollection<string>> ItemsUpdated { get; set; }
public class Item
{
public int Id { get; set; }
public string Name { get; set; } = "";
}
public ObservableCollection<Item> categoryItems = new ObservableCollection<Item>();
protected override void OnInitialized()
{
if (InitialItems != null)
{
categoryItems = new ObservableCollection<Item>(InitialItems.Select((name, index) => new Item { Id = index, Name = name }));
}
}
private void SortList(FluentSortableListEventArgs args)
{
if (args is null || args.OldIndex == args.NewIndex)
{
return;
}
var oldIndex = args.OldIndex;
var newIndex = args.NewIndex;
var items = this.categoryItems;
var itemToMove = items[oldIndex];
items.RemoveAt(oldIndex);
if (newIndex < items.Count)
{
items.Insert(newIndex, itemToMove);
}
else
{
items.Add(itemToMove);
}
itemToMove.Id = newIndex;
InvokeAsync(() =>
{
StateHasChanged();
});
}
private async Task Save()
{
var updatedItems = categoryItems.OrderBy(i => i.Id).Select(i => i.Name).ToList();
this.StateHasChanged();
await ItemsUpdated.InvokeAsync(new ObservableCollection<string>(updatedItems));
}
}
🤔 Expected Behavior
FluentOverflow fits the button width when badge content is updated.
😯 Current Behavior
