Comments (2)
Currently, the FluentOverflow
is setup in such a way that the underlying script only responds to changes to its 'childlist' (OverflowItems being added/removed) so the behavior you are seeing is expected.
The script does already have an exported resize/refresh function . What we could do is add a public method RefreshAsync
to the FluentOverflow
component that would call the exported function in the script when invoked.
Your code would then change to this:
@using System.Collections.ObjectModel
<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%;" @ref="@_overflow">
<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="@SortListAsync" 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 FluentOverflow? _overflow;
protected string ClassValue => "customOverflow";
protected string CategoryButton => "categoryButton";
bool _showPopover;
[Parameter]
public ObservableCollection<string> InitialItems { get; set; } = ["aaaaa", "bbbbb", "ccccc"];
[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 async Task SortListAsync(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;
if (_overflow is not null)
{
await _overflow.RefreshAsync();
}
}
private async Task Save()
{
var updatedItems = categoryItems.OrderBy(i => i.Id).Select(i => i.Name).ToList();
if (_overflow is not null)
{
await _overflow.RefreshAsync();
}
await ItemsUpdated.InvokeAsync(new ObservableCollection<string>(updatedItems));
}
}
- add
@ref="@_overflow"
to the FluentOverflow (and declare it of course) - call
await _overflow.RefreshAsync();
onSortListAsync
andSave
Thoughts?
from fluentui-blazor.
Related Issues (20)
- SelectedItemChanged doesn't trigger after updating Items in FluentTreeView HOT 1
- fix: FluentOverflow initially paints and then repaints if an overflow is detected, leading to a flash in FluentOverflow HOT 2
- fix: FluentSelect ValueChanged called with wrong option HOT 1
- fix: FluentDataGrid GenerateHeaderOption.Sticky not working in Chrome on iPad HOT 2
- fix: Misleading cursor in toast action HOT 1
- fix: Nullable value not working in `FluentTimePicker`
- feat: set Items as optional in ItemsProvider HOT 12
- fix: Menu outside of the screen in `FluentMenu` HOT 1
- fix: Selected option not initially set in FluentSelect only in version 4.8.0 HOT 2
- fix: FluentDatePicker does not update value when current value is null and user selects date from drop down calendar in FluentDatePicker HOT 9
- FluentNavGroup 4.8.0 exception HOT 1
- fix: MaximumSelectedOptions not limiting in FluentAutocomplete HOT 3
- fix: FluentSwitch, FluentAutocomplete and serverals other components do not align at the middle when using inside FluentDataGrid HOT 1
- docs: add information about required nodeJS version HOT 1
- fix: items number badge becomes almost invisible. Also +0 is shown in Overflow component HOT 3
- FluentMultiSplitter - Collapsed doesn't work with fixed size panel HOT 2
- fix: FluentIcon Class property ignores square brackets after update to 4.8.0 HOT 15
- Microsoft.JSInterop.JSException: element.addEventListener is not a function HOT 1
- fix: `CSSBuilder` removes valid CSS class names provided by external CSS frameworks HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fluentui-blazor.