- @foreach (var item in _items)
+
+ @if (Options is not null || ChildContent is not null)
+ {
+
+ @(Options ?? ChildContent)
+
+ }
+ else
{
- <_BitChoiceGroupItem Item="item" ChoiceGroup="this" />
+ @for (int i = 0; i < _items.Count; i++)
+ {
+ var item = _items[i];
+ <_BitChoiceGroupItem @key="@($"{UniqueId}-{i}")" Item="item" ChoiceGroup="this" />
+ }
}
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor.cs
index 5b238555a6..1383a26c06 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor.cs
@@ -11,15 +11,31 @@ namespace Bit.BlazorUI;
private List
_items = [];
private string _name = default!;
private string _labelId = default!;
+ private bool _optionsOrderDirty;
+ private string _optionsContainerId = default!;
private IEnumerable? _oldItems;
+ [Inject] private IJSRuntime _js { get; set; } = default!;
+
+
+
///
/// Id of an element to use as the aria label for the ChoiceGroup.
///
[Parameter] public string? AriaLabelledBy { get; set; }
+ ///
+ /// Keeps the assigned Index of each option in sync with the markup order of the options, even when
+ /// an option is added, removed, or reordered conditionally after the first render (an option that
+ /// appears later registers itself at the end of the list regardless of its markup position). This is
+ /// achieved by reading the DOM order of the options after each render, so it adds a JS interop call
+ /// per render and is opt-in. It only affects the options API (ChildContent/Options); the items API
+ /// already follows the order of the Items collection.
+ ///
+ [Parameter] public bool AutoReorderOptions { get; set; }
+
///
/// The content of the ChoiceGroup, a list of BitChoiceGroupOption components.
///
@@ -121,6 +137,7 @@ namespace Bit.BlazorUI;
internal void RegisterOption(BitChoiceGroupOption option)
{
_items.Add((option as TItem)!);
+ _optionsOrderDirty = true;
SetIndexItems();
@@ -131,28 +148,110 @@ internal void RegisterOption(BitChoiceGroupOption option)
internal void UnregisterOption(BitChoiceGroupOption option)
{
+ if (IsDisposed) return;
+
_items.Remove((option as TItem)!);
+ _optionsOrderDirty = true;
+
+ SetIndexItems();
+
+ StateHasChanged();
+ }
+
+ // Reorders the registered options based on the DOM order of their rendered markers, since an option
+ // that gets conditionally rendered (or reordered) after the first render registers itself at the end
+ // of the items list, no matter where in the markup it is located. Opt-in via AutoReorderOptions.
+ internal void ReorderOptions(string[] orderedOptionIds)
+ {
+ if (orderedOptionIds.Length == 0) return;
+
+ List ordered = new(_items.Count);
+
+ foreach (var optionId in orderedOptionIds)
+ {
+ var item = _items.FirstOrDefault(i => (i as BitChoiceGroupOption)?._OptionId == optionId);
+ if (item is null || ordered.Contains(item)) continue;
+
+ ordered.Add(item);
+ }
+
+ if (ordered.Count == 0) return;
+
+ ordered.AddRange(_items.Except(ordered));
+
+ if (ordered.SequenceEqual(_items)) return;
+
+ _items = ordered;
+
+ SetIndexItems();
StateHasChanged();
}
+ // Emits the marker attribute the DOM read-back uses to recover the markup order of the options.
+ // Only rendered when AutoReorderOptions is enabled (to avoid the extra attribute otherwise) and only
+ // for options (the items API keeps the Items collection order and needs no marker).
+ internal Dictionary? GetItemMarkerAttributes(TItem item)
+ {
+ if (AutoReorderOptions is false) return null;
+ if (item is not BitChoiceGroupOption option) return null;
+
+ return new() { [BitChoiceGroupOption._OPTION_ID_ATTRIBUTE] = option._OptionId };
+ }
+
protected override async Task OnInitializedAsync()
{
_name = $"BitChoiceGroup-{UniqueId}-input-name";
_labelId = $"BitChoiceGroup-{UniqueId}-label";
+ _optionsContainerId = $"BitChoiceGroup-{UniqueId}-options-container";
InitDefaultValue();
await base.OnInitializedAsync();
}
+ protected override async Task OnAfterRenderAsync(bool firstRender)
+ {
+ await base.OnAfterRenderAsync(firstRender);
+
+ if (AutoReorderOptions is false) return;
+ if (ChildContent is null && Options is null) return;
+ if (_optionsOrderDirty is false) return;
+
+ _optionsOrderDirty = false;
+
+ try
+ {
+ var orderedOptionIds = await _js.BitUtilsGetChildrenAttributes(_optionsContainerId, BitChoiceGroupOption._OPTION_ID_ATTRIBUTE);
+ if (IsDisposed) return;
+ if (orderedOptionIds is not null)
+ {
+ ReorderOptions(orderedOptionIds);
+ }
+ }
+ catch (JSDisconnectedException) { } // the circuit is gone (e.g. the user navigated away), nothing to reorder
+ catch (JSException) { } // a JS-side failure while reading the marker order is not fatal, keep the current order
+ }
+
protected override void OnParametersSet()
{
base.OnParametersSet();
- if (ChildContent is not null || Items is null || Items.Any() is false) return;
+ // Opt-in: a pure reorder of existing options registers/unregisters nothing, so flag the DOM
+ // read-back to run after this render to detect it. The read-back only mutates when the order
+ // actually changed, so a stable order just costs one DOM read.
+ if (AutoReorderOptions && (ChildContent is not null || Options is not null))
+ {
+ _optionsOrderDirty = true;
+ }
+
+ // Options render their items themselves and Blazor skips re-rendering them when only the
+ // choice group's own parameters (Value, Styles, NoCircle, ...) change, so push a re-render to each one.
+ RefreshOptions();
+
+ if (ChildContent is not null || Options is not null || Items is null || Items.Any() is false) return;
if (_oldItems is not null && Items.SequenceEqual(_oldItems)) return;
@@ -265,7 +364,7 @@ internal async Task HandleClick(TItem item)
await OnClick.InvokeAsync(item);
}
- internal async Task HandleChange(TItem item)
+ internal void HandleChange(TItem item)
{
if (IsEnabled is false || ReadOnly || GetIsEnabled(item) is false) return;
@@ -273,9 +372,22 @@ internal async Task HandleChange(TItem item)
CurrentValue = GetValue(item);
+ RefreshOptions();
+
StateHasChanged();
}
+ private void RefreshOptions()
+ {
+ // In the Items API there are no registered options, so there is nothing to refresh.
+ if ((Options ?? ChildContent) is null) return;
+
+ foreach (var item in _items)
+ {
+ (item as BitChoiceGroupOption)?.InternalStateHasChanged();
+ }
+ }
+
internal bool GetIsCheckedItem(TItem item)
{
if (CurrentValue is null) return false;
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroupOption.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroupOption.cs
index 1a6c671230..571768cba9 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroupOption.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroupOption.cs
@@ -2,6 +2,10 @@
public partial class BitChoiceGroupOption : ComponentBase, IDisposable
{
+ internal const string _OPTION_ID_ATTRIBUTE = "data-bit-chg-opt";
+
+ internal string _OptionId { get; } = BitShortId.NewId();
+
private bool _disposed;
[CascadingParameter] protected BitChoiceGroup, TValue> Parent { get; set; } = default!;
@@ -103,13 +107,32 @@ public partial class BitChoiceGroupOption : ComponentBase, IDisposable
+ internal void InternalStateHasChanged()
+ {
+ StateHasChanged();
+ }
+
+
+
protected override async Task OnInitializedAsync()
{
- Parent.RegisterOption(this);
+ Parent?.RegisterOption(this);
await base.OnInitializedAsync();
}
+ // Renders the option's item in place, so the rendered order of the items always follows the
+ // markup order of the options, even when an option is added or removed conditionally later on.
+ protected override void BuildRenderTree(RenderTreeBuilder builder)
+ {
+ if (Parent is null) return;
+
+ builder.OpenComponent<_BitChoiceGroupItem, TValue>>(0);
+ builder.AddComponentParameter(1, nameof(_BitChoiceGroupItem, TValue>.ChoiceGroup), Parent);
+ builder.AddComponentParameter(2, nameof(_BitChoiceGroupItem, TValue>.Item), this);
+ builder.CloseComponent();
+ }
+
public void Dispose()
@@ -122,7 +145,7 @@ protected virtual void Dispose(bool disposing)
{
if (_disposed || disposing is false) return;
- Parent.UnregisterOption(this);
+ Parent?.UnregisterOption(this);
_disposed = true;
}
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/_BitChoiceGroupItem.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/_BitChoiceGroupItem.razor
index c24a664563..83e17b8c67 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/_BitChoiceGroupItem.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/_BitChoiceGroupItem.razor
@@ -9,7 +9,7 @@
var isChecked = ChoiceGroup.GetIsCheckedItem(Item);
}
-
+
@if (template is not null)
{
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor
index d1dd75304d..7dfe510d4c 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor
@@ -11,11 +11,13 @@
var searchBoxIconCss = BitIconInfo.From(SearchBoxIcon, SearchBoxIconName ?? "Search")?.GetCssClasses();
var searchBoxClearIconCss = BitIconInfo.From(SearchBoxClearIcon, SearchBoxClearIconName ?? "Cancel")?.GetCssClasses();
var comboBoxAddButtonIconCss = BitIconInfo.From(ComboBoxAddButtonIcon, ComboBoxAddButtonIconName ?? "Add")?.GetCssClasses();
- var itemCheckIconCss = BitIconInfo.From(ItemCheckIcon, ItemCheckIconName ?? "Accept")?.GetCssClasses();
+ var itemCheckIconCss = GetItemCheckIconCss();
}
-@if ((Options ?? ChildContent) is not null)
+@if (Virtualize && (Options ?? ChildContent) is not null)
{
+ @* In virtualize mode the items have to be rendered from the (registered) Items collection, so the
+ options only register themselves here without rendering their items in place. *@
@(Options ?? ChildContent)
@@ -307,6 +309,12 @@
}
}
+ else if ((Options ?? ChildContent) is not null)
+ {
+
+ @(Options ?? ChildContent)
+
+ }
else
{
@foreach (var item in GetSearchedItems())
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs
index e751ec7a37..ad6d7d067e 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs
@@ -12,6 +12,10 @@ namespace Bit.BlazorUI;
{
private int? _totalItems;
private string? _searchText;
+ private int _optionsVersion;
+ private int _searchedItemsCacheVersion = -1;
+ private string? _searchedItemsCacheKey;
+ private HashSet? _searchedItemsCache;
private bool _isResponsiveMode;
private bool _inputSearchHasFocus;
private List _selectedItems = [];
@@ -561,16 +565,74 @@ public async Task UnselectItem(TItem? item)
internal void RegisterOption(BitDropdownOption option)
{
Items!.Add((option as TItem)!);
+ _totalItems = null;
+ _searchedItemsCache = null;
UpdateSelectedItemsFromValues();
StateHasChanged();
}
+ // Each option calls this during the dropdown's render cycle to decide whether its item is visible
+ // for the current search. Options are refreshed explicitly (RefreshOptions in OnParametersSet and
+ // after the search/selection mutations), and the search results are cached per search text; that
+ // cache is reset in OnParametersSet so a change to Items cannot reuse results from a previous set.
+ internal bool ShouldRenderOptionItem(TItem item)
+ {
+ if (_searchText.HasNoValue()) return true;
+
+ // The search runs over the whole item set (and may be a user-provided SearchFunction), so
+ // evaluate it once per search text and reuse the result for every option during the render
+ // cycle instead of re-running it for each item. The cache is also keyed on _optionsVersion,
+ // which the options bump when their own parameters change, so an option whose data changed
+ // (e.g. its Text) without the dropdown itself re-rendering cannot be matched against a stale
+ // result. Because Blazor sets every sibling option's parameters before any of them render,
+ // the version is stable during the option render pass and the set is rebuilt at most once.
+ if (_searchedItemsCache is null ||
+ _searchedItemsCacheKey != _searchText ||
+ _searchedItemsCacheVersion != _optionsVersion)
+ {
+ _searchedItemsCacheKey = _searchText;
+ _searchedItemsCacheVersion = _optionsVersion;
+ _searchedItemsCache = [.. GetSearchedItems()];
+ }
+
+ return _searchedItemsCache.Contains(item);
+ }
+
+ internal string? GetItemCheckIconCss()
+ {
+ return BitIconInfo.From(ItemCheckIcon, ItemCheckIconName ?? "Accept")?.GetCssClasses();
+ }
+
+ // Called by an option when its own parameters change, so the cached search results (which hold
+ // the option instances themselves) cannot be reused after the data they were computed from changed.
+ internal void NotifyOptionParametersChanged()
+ {
+ _optionsVersion++;
+ }
+
+ private void RefreshOptions()
+ {
+ // Only options that render their item in place need the push re-render. In virtualize mode the
+ // options render nothing (the dropdown renders the items from its Items collection), and in the
+ // Items API there are no options at all, so there is nothing to refresh in either case.
+ if (Items is null || Virtualize || (Options ?? ChildContent) is null) return;
+
+ foreach (var item in Items)
+ {
+ (item as BitDropdownOption)?.InternalStateHasChanged();
+ }
+ }
+
internal void UnregisterOption(BitDropdownOption option)
{
+ if (IsDisposed) return;
+
var item = (option as TItem)!;
Items!.Remove(item);
+ _totalItems = null;
+ _searchedItemsCache = null;
if (_selectedItems.Contains(item))
{
@@ -1018,6 +1080,20 @@ protected override async Task OnInitializedAsync()
await base.OnInitializedAsync();
}
+ protected override void OnParametersSet()
+ {
+ // Options render their items themselves and Blazor skips re-rendering them when only the
+ // dropdown's own parameters (Styles, ItemTemplate, ...) change, so push a re-render to each one.
+ RefreshOptions();
+
+ // Items (or the search inputs) may have changed with this parameter set, so drop any cached
+ // search results (and item count) computed for the previous one; they get rebuilt on demand.
+ _totalItems = null;
+ _searchedItemsCache = null;
+
+ base.OnParametersSet();
+ }
+
protected override async Task OnAfterRenderAsync(bool firstRender)
{
await base.OnAfterRenderAsync(firstRender);
@@ -1124,6 +1200,7 @@ private async Task AddOrRemoveSelectedItem(TItem? item, bool addDynamic = false)
}
SetIsSelectedForSelectedItems();
+ RefreshOptions();
await OnValuesChange.InvokeAsync([.. (Values ?? [])!]);
}
@@ -1178,6 +1255,7 @@ private void UpdateSelectedItemsFromValues()
ClassBuilder.Reset();
SetIsSelectedForSelectedItems();
+ RefreshOptions();
}
private async Task CloseCallout()
@@ -1250,6 +1328,8 @@ private async Task SearchItems(ChangeEventArgs e)
{
_searchText = e.Value?.ToString();
+ RefreshOptions();
+
await OnSearch.InvokeAsync(_searchText);
await SearchVirtualized();
}
@@ -1264,6 +1344,8 @@ private async Task ClearSearchBox()
_searchText = null;
+ RefreshOptions();
+
await OnSearch.InvokeAsync(_searchText);
await SearchVirtualized();
}
@@ -1293,6 +1375,8 @@ private async Task ClearComboBoxInput()
_rateLimiter.Reset();
_searchText = null;
+
+ RefreshOptions();
}
private async ValueTask FocusOnComboBoxInput()
@@ -1381,6 +1465,8 @@ private async Task HandleOnAddItemComboClick()
_searchText = string.Empty;
+ RefreshOptions();
+
if (_isResponsiveMode && MultiSelect)
{
await _comboBoxInputResponsiveRef.FocusAsync();
@@ -1485,6 +1571,8 @@ private async Task HandleOnKeyDown(KeyboardEventArgs eventArgs)
{
_searchText = string.Empty;
+ RefreshOptions();
+
await CloseCallout();
}
else if (eventArgs.Key == "Enter")
@@ -1495,6 +1583,8 @@ private async Task HandleOnKeyDown(KeyboardEventArgs eventArgs)
_searchText = string.Empty;
+ RefreshOptions();
+
if (_isResponsiveMode && MultiSelect) return;
await CloseCallout();
@@ -1517,6 +1607,8 @@ private async Task HandleOnComboInput(ChangeEventArgs e)
_searchText = e.Value?.ToString();
+ RefreshOptions();
+
if (Immediate is false) return;
await _rateLimiter.Run(e, DebounceTime, ThrottleTime, async args =>
@@ -1536,6 +1628,9 @@ private async Task HandleOnComboChange(ChangeEventArgs e)
private async Task SearchComboItems(ChangeEventArgs e)
{
_searchText = e.Value?.ToString();
+
+ RefreshOptions();
+
await SearchVirtualized();
await OpenCallout();
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdownOption.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdownOption.cs
index 087f5ad981..3f4ca1f494 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdownOption.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdownOption.cs
@@ -85,13 +85,45 @@ public partial class BitDropdownOption : ComponentBase, IDisposable
+ internal void InternalStateHasChanged()
+ {
+ StateHasChanged();
+ }
+
+
+
protected override async Task OnInitializedAsync()
{
- Parent.RegisterOption(this);
+ Parent?.RegisterOption(this);
await base.OnInitializedAsync();
}
+ protected override void OnParametersSet()
+ {
+ // The parent caches search results keyed on the option instances; when this option's own
+ // parameters change (e.g. Text) the parent must drop that cache so the new data is searched.
+ Parent?.NotifyOptionParametersChanged();
+
+ base.OnParametersSet();
+ }
+
+ // Renders the option's item in place, so the rendered order of the items always follows the
+ // markup order of the options, even when an option is added or removed conditionally later on.
+ // In virtualize mode the dropdown itself renders the items out of its Items collection, so the
+ // option renders nothing (it only registers itself).
+ protected override void BuildRenderTree(RenderTreeBuilder builder)
+ {
+ if (Parent is null || Parent.Virtualize) return;
+ if (Parent.ShouldRenderOptionItem(this) is false) return;
+
+ builder.OpenComponent<_BitDropdownItem, TValue>>(0);
+ builder.AddComponentParameter(1, nameof(_BitDropdownItem, TValue>.Dropdown), Parent);
+ builder.AddComponentParameter(2, nameof(_BitDropdownItem, TValue>.Item), this);
+ builder.AddComponentParameter(3, nameof(_BitDropdownItem, TValue>.ItemCheckIconCss), Parent.GetItemCheckIconCss());
+ builder.CloseComponent();
+ }
+
public void Dispose()
@@ -104,7 +136,7 @@ protected virtual void Dispose(bool disposing)
{
if (_disposed || disposing is false) return;
- Parent.UnregisterOption(this);
+ Parent?.UnregisterOption(this);
_disposed = true;
}
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Lists/Timeline/BitTimeline.razor b/src/BlazorUI/Bit.BlazorUI/Components/Lists/Timeline/BitTimeline.razor
index 4c9bdf90a5..752e5dc02d 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Lists/Timeline/BitTimeline.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Lists/Timeline/BitTimeline.razor
@@ -2,73 +2,23 @@
@inherits BitComponentBase
@typeparam TItem
-
- @(Options ?? ChildContent)
-
-
- @for (int i = 0; i < _items.Count; i++)
+ @if (Options is not null || ChildContent is not null)
{
- var item = _items[i];
-
- var icon = GetIcon(item);
- var hideDot = GetHideDot(item);
- var iconName = GetIconName(item);
- var dotTemplate = GetDotTemplate(item);
- var primaryContent = GetPrimaryContent(item);
- var isEnabled = IsEnabled && GetIsEnabled(item);
- var secondaryContent = GetSecondaryContent(item);
-
- icon = BitIconInfo.From(icon, iconName);
-
-
-
- @if (primaryContent is not null)
- {
- @primaryContent(item)
- }
- else
- {
- @GetPrimaryText(item)
- }
-
-
- @if (hideDot is false)
- {
- @if (dotTemplate is not null)
- {
- @dotTemplate(item)
- }
- else
- {
-
- @if (icon is not null)
- {
-
- }
- }
-
-
- @if (secondaryContent is not null)
- {
- @secondaryContent(item)
- }
- else
- {
- @GetSecondaryText(item)
- }
-
-
+
+ @(Options ?? ChildContent)
+
+ }
+ else
+ {
+ @for (int i = 0; i < _items.Count; i++)
+ {
+ var item = _items[i];
+ <_BitTimelineItem Timeline="this" Item="item" @key="@GetItemKey(item, i.ToString())" />
+ }
}
(NameSelectors.Key.Name);
+ }
+
- private string? GetItemClasses(TItem item)
+ internal string? GetItemClasses(TItem item)
{
StringBuilder className = new StringBuilder();
@@ -212,9 +263,11 @@ protected override Task OnParametersSetAsync()
return className.ToString();
}
- private async Task HandleOnItemClick(TItem item)
+ internal async Task HandleOnItemClick(TItem item)
{
- if (GetIsEnabled(item) is false) return;
+ // The item renders as a div, where the disabled attribute is ineffective, so gate the handler
+ // with the combined enabled state (timeline-level and item-level) to match the rendered state.
+ if (IsEnabled is false || GetIsEnabled(item) is false) return;
await OnItemClick.InvokeAsync(item);
@@ -265,7 +318,7 @@ private async Task HandleOnItemClick(TItem item)
return item.GetValueFromProperty(NameSelectors.Class.Name);
}
- private BitIconInfo? GetIcon(TItem? item)
+ internal BitIconInfo? GetIcon(TItem? item)
{
if (item is null) return null;
@@ -289,7 +342,7 @@ private async Task HandleOnItemClick(TItem item)
return item.GetValueFromProperty(NameSelectors.Icon.Name);
}
- private string? GetIconName(TItem? item)
+ internal string? GetIconName(TItem? item)
{
if (item is null) return null;
@@ -313,7 +366,7 @@ private async Task HandleOnItemClick(TItem item)
return item.GetValueFromProperty(NameSelectors.IconName.Name);
}
- private bool GetIsEnabled(TItem? item)
+ internal bool GetIsEnabled(TItem? item)
{
if (item is null) return false;
@@ -337,7 +390,7 @@ private bool GetIsEnabled(TItem? item)
return item.GetValueFromProperty(NameSelectors.IsEnabled.Name, true);
}
- private string? GetStyle(TItem? item)
+ internal string? GetStyle(TItem? item)
{
if (item is null) return null;
@@ -361,7 +414,7 @@ private bool GetIsEnabled(TItem? item)
return item.GetValueFromProperty(NameSelectors.Style.Name);
}
- private RenderFragment? GetPrimaryContent(TItem? item)
+ internal RenderFragment? GetPrimaryContent(TItem? item)
{
if (item is null) return null;
@@ -385,7 +438,7 @@ private bool GetIsEnabled(TItem? item)
return item.GetValueFromProperty?>(NameSelectors.PrimaryContent.Name);
}
- private RenderFragment? GetSecondaryContent(TItem? item)
+ internal RenderFragment? GetSecondaryContent(TItem? item)
{
if (item is null) return null;
@@ -409,7 +462,7 @@ private bool GetIsEnabled(TItem? item)
return item.GetValueFromProperty?>(NameSelectors.SecondaryContent.Name);
}
- private string? GetPrimaryText(TItem? item)
+ internal string? GetPrimaryText(TItem? item)
{
if (item is null) return null;
@@ -433,7 +486,7 @@ private bool GetIsEnabled(TItem? item)
return item.GetValueFromProperty(NameSelectors.PrimaryText.Name);
}
- private string? GetSecondaryText(TItem? item)
+ internal string? GetSecondaryText(TItem? item)
{
if (item is null) return null;
@@ -457,7 +510,7 @@ private bool GetIsEnabled(TItem? item)
return item.GetValueFromProperty(NameSelectors.SecondaryText.Name);
}
- private bool GetHideDot(TItem? item)
+ internal bool GetHideDot(TItem? item)
{
if (item is null) return false;
@@ -505,7 +558,7 @@ private bool GetReversed(TItem? item)
return item.GetValueFromProperty(NameSelectors.Reversed.Name, false);
}
- private RenderFragment? GetDotTemplate(TItem? item)
+ internal RenderFragment? GetDotTemplate(TItem? item)
{
if (item is null) return null;
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Lists/Timeline/BitTimelineOption.cs b/src/BlazorUI/Bit.BlazorUI/Components/Lists/Timeline/BitTimelineOption.cs
index 34702f580b..e6f8aaaa7e 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Lists/Timeline/BitTimelineOption.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Lists/Timeline/BitTimelineOption.cs
@@ -105,13 +105,32 @@ public partial class BitTimelineOption : ComponentBase, IDisposable
+ internal void InternalStateHasChanged()
+ {
+ StateHasChanged();
+ }
+
+
+
protected override async Task OnInitializedAsync()
{
- Parent.RegisterOption(this);
+ Parent?.RegisterOption(this);
await base.OnInitializedAsync();
}
+ // Renders the option's item in place, so the rendered order of the items always follows the
+ // markup order of the options, even when an option is added or removed conditionally later on.
+ protected override void BuildRenderTree(RenderTreeBuilder builder)
+ {
+ if (Parent is null) return;
+
+ builder.OpenComponent<_BitTimelineItem>(0);
+ builder.AddComponentParameter(1, nameof(_BitTimelineItem.Timeline), Parent);
+ builder.AddComponentParameter(2, nameof(_BitTimelineItem.Item), this);
+ builder.CloseComponent();
+ }
+
public void Dispose()
@@ -124,7 +143,7 @@ protected virtual void Dispose(bool disposing)
{
if (disposing is false || _disposed) return;
- Parent.UnregisterOption(this);
+ Parent?.UnregisterOption(this);
_disposed = true;
}
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Lists/Timeline/_BitTimelineItem.razor b/src/BlazorUI/Bit.BlazorUI/Components/Lists/Timeline/_BitTimelineItem.razor
new file mode 100644
index 0000000000..0019d1689b
--- /dev/null
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Lists/Timeline/_BitTimelineItem.razor
@@ -0,0 +1,63 @@
+@namespace Bit.BlazorUI
+@typeparam TItem where TItem : class
+
+@{
+ var icon = Timeline.GetIcon(Item);
+ var hideDot = Timeline.GetHideDot(Item);
+ var iconName = Timeline.GetIconName(Item);
+ var dotTemplate = Timeline.GetDotTemplate(Item);
+ var primaryContent = Timeline.GetPrimaryContent(Item);
+ var isEnabled = Timeline.IsEnabled && Timeline.GetIsEnabled(Item);
+ var secondaryContent = Timeline.GetSecondaryContent(Item);
+
+ icon = BitIconInfo.From(icon, iconName);
+}
+
+
+
+ @if (primaryContent is not null)
+ {
+ @primaryContent(Item)
+ }
+ else
+ {
+ @Timeline.GetPrimaryText(Item)
+ }
+
+
+ @if (hideDot is false)
+ {
+ @if (dotTemplate is not null)
+ {
+ @dotTemplate(Item)
+ }
+ else
+ {
+
+ @if (icon is not null)
+ {
+
+ }
+ }
+
+
+ @if (secondaryContent is not null)
+ {
+ @secondaryContent(Item)
+ }
+ else
+ {
+ @Timeline.GetSecondaryText(Item)
+ }
+
+
where TItem : class
+{
+ private bool _preventKeyDownDefault;
+
+ [Parameter] public TItem Item { get; set; } = default!;
+
+ [Parameter] public BitTimeline Timeline { get; set; } = default!;
+
+ private async Task HandleOnItemKeyDown(KeyboardEventArgs e)
+ {
+ var isSpace = e.Key == " " || e.Key == "Spacebar";
+
+ // Space scrolls the page by default; suppress it on keydown while it is the space key (Enter has
+ // no default to suppress). Kept key-scoped so Tab and other keys still behave normally.
+ _preventKeyDownDefault = isSpace;
+
+ if (isSpace || e.Key == "Enter")
+ {
+ await Timeline.HandleOnItemClick(Item);
+ }
+ }
+}
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.razor b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.razor
index 8a45c0fe5a..456f06d6bc 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.razor
@@ -3,7 +3,11 @@
@typeparam TItem
- @(Options ?? ChildContent)
+ @* The options render a marker element each, whose DOM order is used to keep the order of the
+ registered items in sync with the markup order of the options (even when an option is added or
+ removed conditionally later on), since the breadcrumb has to render its items out of an ordered
+ list to be able to split them between the display items and the overflow callout. *@
+ @(Options ?? ChildContent)
: BitComponentBase where TItem : class
{
private bool _isCalloutOpen;
+ private bool _optionsOrderDirty;
private uint _internalOverflowIndex;
private uint _internalMaxDisplayedItems;
private List
_items = [];
@@ -18,6 +19,7 @@ public partial class BitBreadcrumb : BitComponentBase where TItem : class
private string _overlayId = default!;
private string _overflowAnchorId = default!;
private string _scrollContainerId = default!;
+ private string _optionsContainerId = default!;
@@ -25,6 +27,16 @@ public partial class BitBreadcrumb : BitComponentBase where TItem : class
+ ///
+ /// Keeps the rendered order of the items in sync with the markup order of the options even when
+ /// existing options are only reordered (not added or removed) — for example when the options are
+ /// produced by a keyed loop whose source collection gets re-sorted. This is achieved by reading the
+ /// DOM order of the options after each render, so it adds a JS interop call per render and is opt-in.
+ /// It only affects the options API (ChildContent/Options); the items API already follows the order
+ /// of the Items collection. Adding or removing options is always kept in order regardless of this flag.
+ ///
+ [Parameter] public bool AutoReorderOptions { get; set; }
+
///
/// The content of the BitBreadcrumb, that are BitBreadOption components.
///
@@ -138,14 +150,57 @@ internal void RegisterOptions(BitBreadcrumbOption option)
_internalItems = [.. _items];
_internalMaxDisplayedItems = MaxDisplayedItems == 0 ? (uint)_items.Count : MaxDisplayedItems;
_internalOverflowIndex = OverflowIndex >= _internalMaxDisplayedItems ? 0 : OverflowIndex;
+ _optionsOrderDirty = true;
SetItemsToShow();
StateHasChanged();
}
+ // The breadcrumb renders the visible items itself from the registered options (they only render a
+ // hidden marker), reading each option's data during its own render. So when an option's parameters
+ // change, the breadcrumb must re-render to pick up the new values.
+ internal void NotifyOptionParametersChanged()
+ {
+ if (IsDisposed) return;
+
+ StateHasChanged();
+ }
+
internal void UnregisterOptions(BitBreadcrumbOption option)
{
+ if (IsDisposed) return;
+
_items.Remove((option as TItem)!);
_internalItems = [.. _items];
+ _optionsOrderDirty = true;
+ SetItemsToShow();
+ StateHasChanged();
+ }
+
+ // Reorders the registered options based on the DOM order of their rendered markers, since an
+ // option that gets conditionally rendered after the first render registers itself at the end of
+ // the items list, no matter where in the markup it is located.
+ internal void ReorderOptions(string[] orderedOptionIds)
+ {
+ if (orderedOptionIds.Length == 0) return;
+
+ List ordered = new(_items.Count);
+
+ foreach (var optionId in orderedOptionIds)
+ {
+ var item = _items.FirstOrDefault(i => (i as BitBreadcrumbOption)?._OptionId == optionId);
+ if (item is null || ordered.Contains(item)) continue;
+
+ ordered.Add(item);
+ }
+
+ if (ordered.Count == 0) return;
+
+ ordered.AddRange(_items.Except(ordered));
+
+ if (ordered.SequenceEqual(_items)) return;
+
+ _items = ordered;
+ _internalItems = [.. _items];
SetItemsToShow();
StateHasChanged();
}
@@ -170,6 +225,7 @@ protected override Task OnInitializedAsync()
_overlayId = $"BitBreadcrumb-{UniqueId}-overlay";
_overflowAnchorId = $"BitBreadcrumb-{UniqueId}-overflow-anchor";
_scrollContainerId = $"BitBreadcrumb-{UniqueId}-scroll-container";
+ _optionsContainerId = $"BitBreadcrumb-{UniqueId}-options-container";
return base.OnInitializedAsync();
}
@@ -180,6 +236,13 @@ protected override void OnParametersSet()
{
_items = Items is not null ? [.. Items] : [];
}
+ else if (AutoReorderOptions)
+ {
+ // Opt-in: re-read the DOM order of the options after this render so a pure reorder of
+ // existing options (which registers/unregisters nothing) is picked up. ReorderOptions
+ // only mutates when the order actually changed, so a stable order costs one DOM read.
+ _optionsOrderDirty = true;
+ }
if (_items.Any() is false) return;
@@ -209,6 +272,28 @@ protected override void OnAfterRender(bool firstRender)
base.OnAfterRender(firstRender);
}
+ protected override async Task OnAfterRenderAsync(bool firstRender)
+ {
+ await base.OnAfterRenderAsync(firstRender);
+
+ if (_optionsOrderDirty)
+ {
+ _optionsOrderDirty = false;
+
+ try
+ {
+ var orderedOptionIds = await _js.BitUtilsGetChildrenAttributes(_optionsContainerId, BitBreadcrumbOption._OPTION_ID_ATTRIBUTE);
+ if (IsDisposed) return;
+ if (orderedOptionIds is not null)
+ {
+ ReorderOptions(orderedOptionIds);
+ }
+ }
+ catch (JSDisconnectedException) { } // the circuit is gone (e.g. the user navigated away), nothing to reorder
+ catch (JSException) { } // a JS-side failure while reading the marker order is not fatal, keep the current order
+ }
+ }
+
private async Task HandleOnItemClick(TItem item)
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumbOption.cs b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumbOption.cs
index 0624b25992..cad2951634 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumbOption.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumbOption.cs
@@ -2,7 +2,14 @@
public partial class BitBreadcrumbOption : ComponentBase, IDisposable
{
+ internal const string _OPTION_ID_ATTRIBUTE = "data-bit-brc-opt";
+
+ internal string _OptionId { get; } = BitShortId.NewId();
+
private bool _disposed;
+ private string? _lastParametersSignature;
+ private RenderFragment? _lastTemplate;
+ private RenderFragment? _lastOverflowTemplate;
@@ -80,11 +87,49 @@ public partial class BitBreadcrumbOption : ComponentBase, IDisposable
protected override void OnInitialized()
{
- Parent.RegisterOptions(this);
+ Parent?.RegisterOptions(this);
base.OnInitialized();
}
+ protected override void OnParametersSet()
+ {
+ // The parent renders the visible items from the options and reads their data during its own
+ // render, so a change to an option's parameters isn't reflected until the parent re-renders.
+ // Notify it only when a rendered parameter actually changes; the guard avoids a render loop
+ // since OnParametersSet runs on every parent render. Reference-type params are folded into a
+ // value-based signature (e.g. the icon's CSS classes) so an equal-but-new instance won't churn.
+ // Template/OverflowTemplate are compared by reference identity since the parent renders them too.
+ var signature = string.Join('\u001F', Text, Href, IconName, Icon?.GetCssClasses(), IsEnabled, IsSelected, Class, Style, ReversedIcon, Key);
+
+ var changed = _lastParametersSignature != signature ||
+ ReferenceEquals(_lastTemplate, Template) is false ||
+ ReferenceEquals(_lastOverflowTemplate, OverflowTemplate) is false;
+
+ if (_lastParametersSignature is not null && changed)
+ {
+ Parent?.NotifyOptionParametersChanged();
+ }
+
+ _lastParametersSignature = signature;
+ _lastTemplate = Template;
+ _lastOverflowTemplate = OverflowTemplate;
+
+ base.OnParametersSet();
+ }
+
+ // Renders a hidden marker element in place, whose DOM order (in the hidden options container of
+ // the breadcrumb) is used to keep the order of the registered items in sync with the markup order
+ // of the options, even when an option is added or removed conditionally later on.
+ // The option renders nothing but this single flat marker, so the breadcrumb's DOM read-back
+ // (Utils.getChildrenAttributes) sees exactly one marker per option, in markup order.
+ protected override void BuildRenderTree(RenderTreeBuilder builder)
+ {
+ builder.OpenElement(0, "span");
+ builder.AddAttribute(1, _OPTION_ID_ATTRIBUTE, _OptionId);
+ builder.CloseElement();
+ }
+
public void Dispose()
@@ -97,7 +142,7 @@ protected virtual void Dispose(bool disposing)
{
if (_disposed || disposing is false) return;
- Parent.UnregisterOptions(this);
+ Parent?.UnregisterOptions(this);
_disposed = true;
}
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNav.razor b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNav.razor
index 5e8a3e956e..1d69db2f0c 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNav.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNav.razor
@@ -2,12 +2,6 @@
@inherits BitComponentBase
@typeparam TItem
-
-
- @(Options ?? ChildContent)
-
-
-
- @foreach (var (item, idx) in _items.Select((item, idx) => (item, idx)))
+ @if (Options is not null || ChildContent is not null)
+ {
+ @(Options ?? ChildContent)
+ }
+ else
{
- var key = GetItemKey(item, idx.ToString());
- <_BitNavChild @key="@key" Key="@key" Item="item" Depth="0" />
+ @foreach (var (item, idx) in _items.Select((item, idx) => (item, idx)))
+ {
+ var key = GetItemKey(item, idx.ToString());
+ <_BitNavChild @key="@key" Key="@key" Item="item" Depth="0" />
+ }
}
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNav.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNav.razor.cs
index 37d67bcbc1..c74747e74d 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNav.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNav.razor.cs
@@ -10,6 +10,7 @@ public partial class BitNav : BitComponentBase where TItem : class
{
internal TItem? _currentItem;
internal List _items = [];
+ private bool _selectionDirty;
private IEnumerable? _oldItems;
internal Dictionary _itemExpandStates = [];
@@ -25,6 +26,9 @@ public partial class BitNav : BitComponentBase where TItem : class
public void CollapseAll(TItem? item = null)
{
(item is null ? _items : [item]).ToList().ForEach(it => ToggleItemAndChildren(it, false));
+
+ RefreshOptions();
+ StateHasChanged();
}
///
@@ -35,6 +39,9 @@ public void ExpandAll(TItem? item = null)
if (SingleExpand) return;
(item is null ? _items : [item]).ToList().ForEach(it => ToggleItemAndChildren(it, true));
+
+ RefreshOptions();
+ StateHasChanged();
}
///
@@ -60,8 +67,6 @@ public async Task ToggleItem(TItem Item)
SetItemExpanded(Item, isExpanded);
}
- StateHasChanged();
-
_currentItem = Item;
}
else
@@ -69,6 +74,9 @@ public async Task ToggleItem(TItem Item)
SetItemExpanded(Item, isExpanded);
}
+ RefreshOptions();
+ StateHasChanged();
+
await OnItemToggle.InvokeAsync(Item);
}
@@ -85,6 +93,8 @@ internal void RegisterOption(BitNavOption option)
internal void UnregisterOption(BitNavOption option)
{
+ if (IsDisposed) return;
+
_items.Remove((option as TItem)!);
StateHasChanged();
@@ -187,6 +197,29 @@ protected override async Task OnInitializedAsync()
await base.OnInitializedAsync();
}
+ protected override void OnParametersSet()
+ {
+ // Options render their items themselves and Blazor skips re-rendering them when only the
+ // nav's own parameters (Styles, IconOnly, ItemTemplate, ...) change, so push a re-render to each one.
+ RefreshOptions();
+
+ base.OnParametersSet();
+ }
+
+ protected override void OnAfterRender(bool firstRender)
+ {
+ // In Automatic mode each option requests a URL match as it registers. Running the match per
+ // option is O(n^2) (each pass flattens the whole tree and matches every item), so the options
+ // only flag it and the match runs once here, after the registration batch has rendered.
+ if (_selectionDirty)
+ {
+ _selectionDirty = false;
+ SetSelectedItemByCurrentUrl();
+ }
+
+ base.OnAfterRender(firstRender);
+ }
+
internal void SetItemExpanded(TItem item, bool value)
@@ -230,6 +263,7 @@ internal async Task SetSelectedItem(TItem? item)
await OnSelectItem.InvokeAsync(item);
+ RefreshOptions();
StateHasChanged();
}
@@ -238,6 +272,14 @@ internal string GetItemKey(TItem item, string defaultKey)
return GetKey(item) ?? $"{UniqueId}-{defaultKey}";
}
+ // Flags that the Automatic-mode selection needs to be recomputed. Called by options as they register
+ // instead of matching immediately, so a batch of registrations collapses into a single match pass
+ // in OnAfterRender rather than one O(n) pass per option.
+ internal void MarkSelectionDirty()
+ {
+ _selectionDirty = true;
+ }
+
internal void SetSelectedItemByCurrentUrl()
{
if (Mode is not BitNavMode.Automatic) return;
@@ -315,6 +357,21 @@ private void OnSetSelectedItem()
if (SelectedItem is null) return;
ToggleItemAndParents(_items, SelectedItem, true);
+
+ // The selection affects the previously and newly selected items, which render themselves in
+ // the options mode, so push a re-render to all of them after the expansion state is updated.
+ RefreshOptions();
+ }
+
+ private void RefreshOptions()
+ {
+ // In the Items API there are no registered options, so there is nothing to refresh.
+ if ((Options ?? ChildContent) is null) return;
+
+ foreach (var item in _items)
+ {
+ (item as BitNavOption)?.InternalRecursiveStateHasChanged();
+ }
}
private void OnSetMode()
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNavOption.razor b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNavOption.razor
index f0fe074331..cbb36cd106 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNavOption.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNavOption.razor
@@ -1,7 +1,21 @@
@namespace Bit.BlazorUI
-
-
- @ChildContent
-
-
\ No newline at end of file
+@* Renders the option's item in place, so the rendered order of the items always follows the markup
+ order of the options, even when an option is added or removed conditionally later on. *@
+@if (Nav is not null)
+{
+ @if (ChildContent is null)
+ {
+ <_BitNavChild TItem="BitNavOption" Item="this" Depth="@Depth" />
+ }
+ else
+ {
+ <_BitNavChild TItem="BitNavOption" Item="this" Depth="@Depth">
+
+
+ @ChildContent
+
+
+
+ }
+}
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNavOption.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNavOption.razor.cs
index e48897a683..84113eff3a 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNavOption.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNavOption.razor.cs
@@ -146,27 +146,46 @@ public partial class BitNavOption : ComponentBase, IDisposable
+ internal int Depth => Parent is null ? 0 : Parent.Depth + 1;
+
+ internal void InternalRecursiveStateHasChanged()
+ {
+ StateHasChanged();
+
+ foreach (var child in ChildItems)
+ {
+ child.InternalRecursiveStateHasChanged();
+ }
+ }
+
+
+
protected override async Task OnInitializedAsync()
{
if (Parent is null)
{
- Nav.RegisterOption(this);
+ Nav?.RegisterOption(this);
}
else
{
Parent.ChildItems.Add(this);
}
- if (Nav.AllExpanded)
- {
- Nav.SetIsExpanded(this, true);
- }
-
- Nav.SetItemExpanded(this, Nav.GetIsExpanded(this) ?? false);
-
- if (Nav.Mode == BitNavMode.Automatic)
+ if (Nav is not null)
{
- Nav.SetSelectedItemByCurrentUrl();
+ if (Nav.AllExpanded)
+ {
+ Nav.SetIsExpanded(this, true);
+ }
+
+ Nav.SetItemExpanded(this, Nav.GetIsExpanded(this) ?? false);
+
+ if (Nav.Mode == BitNavMode.Automatic)
+ {
+ // Defer the URL match to a single pass after this registration batch renders, instead
+ // of matching here per option (which would flatten and scan the whole tree each time).
+ Nav.MarkSelectionDirty();
+ }
}
Parent?.StateHasChanged();
@@ -188,14 +207,14 @@ protected virtual void Dispose(bool disposing)
if (Parent is null)
{
- Nav.UnregisterOption(this);
+ Nav?.UnregisterOption(this);
}
else
{
Parent.ChildItems.Remove(this);
}
- Nav.SetSelectedItemByCurrentUrl();
+ Nav?.SetSelectedItemByCurrentUrl();
Parent?.StateHasChanged();
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/_BitNavChild.razor b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/_BitNavChild.razor
index 3ee519234e..6f7bc1deb1 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/_BitNavChild.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/_BitNavChild.razor
@@ -182,7 +182,17 @@
}
}
- @if ((childItems.Any()) && (isExpanded))
+ @if (ChildrenFragment is not null)
+ {
+ @* The nav options render their children in place, so the children have to stay rendered (but
+ hidden) while collapsed to keep their registrations (and expand/collapse chevron) alive. *@
+
+
+ @ChildrenFragment
+
+
+ }
+ else if ((childItems.Any()) && (isExpanded))
{
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/_BitNavChild.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/_BitNavChild.razor.cs
index e3bedbe546..73694585ce 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/_BitNavChild.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/_BitNavChild.razor.cs
@@ -16,6 +16,8 @@ public partial class _BitNavChild where TItem : class
[Parameter] public int Depth { get; set; }
+ [Parameter] public RenderFragment? ChildrenFragment { get; set; }
+
private async Task HandleOnClick(bool renderLink)
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/NavBar/BitNavBar.razor b/src/BlazorUI/Bit.BlazorUI/Components/Navs/NavBar/BitNavBar.razor
index 68aac3dd4a..d3b33cff0d 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/NavBar/BitNavBar.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/NavBar/BitNavBar.razor
@@ -10,53 +10,19 @@
class="@ClassBuilder.Value"
dir="@Dir?.ToString().ToLower()">
-
- @(Options ?? ChildContent)
-
-
- @foreach (var (item, idx) in _items.Select((item, idx) => (item, idx)))
+ @if (Options is not null || ChildContent is not null)
{
- var itm = item;
- var url = GetUrl(item);
- var template = GetTemplate(item);
- var isEnabled = GetIsEnabled(item);
- var href = (isEnabled && (SelectedItem != itm || Reselectable)) ? url : null;
-
- <_BitNavBarChild @key="@GetItemKey(item, idx.ToString())"
- Href="@href"
- Title="@GetTitle(item)"
- Target="@GetTarget(item)"
- Style="@GetItemCssStyle(item)"
- Disabled="@(isEnabled is false)"
- OnClick="() => HandleOnClick(itm)"
- Class="@GetItemCssClass(item, isEnabled)">
- @if (template is not null)
- {
- @template(item)
- }
- else if (ItemTemplate is not null)
- {
- @ItemTemplate(item)
- }
- else
- {
- var icon = GetIcon(item);
- var iconName = GetIconName(item);
-
- icon = BitIconInfo.From(icon, iconName);
-
- @if (icon is not null)
- {
- @GetText(item)
- }
- }
-
+
+ @(Options ?? ChildContent)
+
+ }
+ else
+ {
+ @foreach (var (item, idx) in _items.Select((item, idx) => (item, idx)))
+ {
+ <_BitNavBarItem @key="@GetItemKey(item, idx.ToString())" NavBar="this" Item="item" />
+ }
}
\ No newline at end of file
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/NavBar/BitNavBar.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Navs/NavBar/BitNavBar.razor.cs
index ad7742ec35..45385a8417 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/NavBar/BitNavBar.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/NavBar/BitNavBar.razor.cs
@@ -9,6 +9,7 @@ public partial class BitNavBar : BitComponentBase where TItem : class
{
internal TItem? _currentItem;
internal List _items = [];
+ private bool _selectionDirty;
private IEnumerable? _oldItems;
@@ -108,6 +109,7 @@ public partial class BitNavBar : BitComponentBase where TItem : class
/// Selected item to show in the navbar.
///
[Parameter, TwoWayBound]
+ [CallOnSet(nameof(OnSetSelectedItem))]
public TItem? SelectedItem { get; set; }
///
@@ -120,14 +122,16 @@ public partial class BitNavBar : BitComponentBase where TItem : class
internal void RegisterOption(BitNavBarOption option)
{
_items.Add((option as TItem)!);
- SetSelectedItemByCurrentUrl();
+ _selectionDirty = true;
StateHasChanged();
}
internal void UnregisterOption(BitNavBarOption option)
{
+ if (IsDisposed) return;
+
_items.Remove((option as TItem)!);
- SetSelectedItemByCurrentUrl();
+ _selectionDirty = true;
StateHasChanged();
}
@@ -196,12 +200,52 @@ protected override async Task OnInitializedAsync()
await base.OnInitializedAsync();
}
+ protected override void OnParametersSet()
+ {
+ // Options render their items themselves and Blazor skips re-rendering them when only the
+ // navbar's own parameters (Styles, IconOnly, ItemTemplate, ...) change, so push a re-render to each one.
+ RefreshOptions();
+
+ base.OnParametersSet();
+ }
+
+ protected override void OnAfterRender(bool firstRender)
+ {
+ // Each option flags a selection recompute as it registers instead of matching immediately, so
+ // registering n options collapses into a single match pass here rather than one O(n) pass each.
+ if (_selectionDirty)
+ {
+ _selectionDirty = false;
+ SetSelectedItemByCurrentUrl();
+ RefreshOptions();
+ }
+
+ base.OnAfterRender(firstRender);
+ }
+
+ private void OnSetSelectedItem()
+ {
+ RefreshOptions();
+ }
+
+ private void RefreshOptions()
+ {
+ // In the Items API there are no registered options, so there is nothing to refresh.
+ if ((Options ?? ChildContent) is null) return;
+
+ foreach (var item in _items)
+ {
+ (item as BitNavBarOption)?.InternalStateHasChanged();
+ }
+ }
+
private void OnLocationChanged(object? sender, LocationChangedEventArgs args)
{
SetSelectedItemByCurrentUrl();
+ RefreshOptions();
StateHasChanged();
}
@@ -222,6 +266,8 @@ private void OnSetParameters()
_items = Items?.ToList() ?? [];
_oldItems = Items;
+
+ SetSelectedItemByCurrentUrl();
}
private void OnSetMode()
@@ -239,6 +285,7 @@ private async Task SetSelectedItem(TItem item)
await OnSelectItem.InvokeAsync(item);
+ RefreshOptions();
StateHasChanged();
}
@@ -247,7 +294,7 @@ private string GetItemKey(TItem item, string defaultKey)
return GetKey(item) ?? $"{UniqueId}-{defaultKey}";
}
- private async Task HandleOnClick(TItem item)
+ internal async Task HandleOnClick(TItem item)
{
if (GetIsEnabled(item) is false) return;
@@ -262,7 +309,7 @@ private async Task HandleOnClick(TItem item)
}
}
- private string GetItemCssStyle(TItem item)
+ internal string GetItemCssStyle(TItem item)
{
var itm = Styles?.Item;
var style = GetStyle(item);
@@ -270,7 +317,7 @@ private string GetItemCssStyle(TItem item)
return $"{itm} {style} {selected}".Trim();
}
- private string GetItemCssClass(TItem item, bool isEnabled)
+ internal string GetItemCssClass(TItem item, bool isEnabled)
{
var itm = Classes?.Item;
var @class = GetClass(item);
@@ -304,7 +351,7 @@ private string GetItemCssClass(TItem item, bool isEnabled)
return item.GetValueFromProperty(NameSelectors.Class.Name);
}
- private BitIconInfo? GetIcon(TItem item)
+ internal BitIconInfo? GetIcon(TItem item)
{
if (item is BitNavBarItem navItem)
{
@@ -326,7 +373,7 @@ private string GetItemCssClass(TItem item, bool isEnabled)
return item.GetValueFromProperty(NameSelectors.Icon.Name);
}
- private string? GetIconName(TItem item)
+ internal string? GetIconName(TItem item)
{
if (item is BitNavBarItem navItem)
{
@@ -348,7 +395,7 @@ private string GetItemCssClass(TItem item, bool isEnabled)
return item.GetValueFromProperty(NameSelectors.IconName.Name);
}
- private bool GetIsEnabled(TItem item)
+ internal bool GetIsEnabled(TItem item)
{
if (item is BitNavBarItem navItem)
{
@@ -414,7 +461,7 @@ private bool GetIsEnabled(TItem item)
return item.GetValueFromProperty(NameSelectors.Style.Name);
}
- private string? GetTarget(TItem item)
+ internal string? GetTarget(TItem item)
{
if (item is BitNavBarItem navItem)
{
@@ -436,7 +483,7 @@ private bool GetIsEnabled(TItem item)
return item.GetValueFromProperty(NameSelectors.Target.Name);
}
- private RenderFragment? GetTemplate(TItem item)
+ internal RenderFragment? GetTemplate(TItem item)
{
if (item is BitNavBarItem navItem)
{
@@ -458,7 +505,7 @@ private bool GetIsEnabled(TItem item)
return item.GetValueFromProperty?>(NameSelectors.Template.Name);
}
- private string? GetText(TItem item)
+ internal string? GetText(TItem item)
{
if (item is BitNavBarItem navItem)
{
@@ -480,7 +527,7 @@ private bool GetIsEnabled(TItem item)
return item.GetValueFromProperty(NameSelectors.Text.Name);
}
- private string? GetTitle(TItem item)
+ internal string? GetTitle(TItem item)
{
if (item is BitNavBarItem navItem)
{
@@ -502,7 +549,7 @@ private bool GetIsEnabled(TItem item)
return item.GetValueFromProperty(NameSelectors.Title.Name);
}
- private string? GetUrl(TItem item)
+ internal string? GetUrl(TItem item)
{
if (item is BitNavBarItem navItem)
{
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/NavBar/BitNavBarOption.cs b/src/BlazorUI/Bit.BlazorUI/Components/Navs/NavBar/BitNavBarOption.cs
index b4c63bb15e..314cdceb8b 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/NavBar/BitNavBarOption.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/NavBar/BitNavBarOption.cs
@@ -92,6 +92,13 @@ public partial class BitNavBarOption : ComponentBase, IDisposable
+ internal void InternalStateHasChanged()
+ {
+ StateHasChanged();
+ }
+
+
+
protected override async Task OnInitializedAsync()
{
NavBar?.RegisterOption(this);
@@ -99,6 +106,18 @@ protected override async Task OnInitializedAsync()
await base.OnInitializedAsync();
}
+ // Renders the option's item in place, so the rendered order of the items always follows the
+ // markup order of the options, even when an option is added or removed conditionally later on.
+ protected override void BuildRenderTree(RenderTreeBuilder builder)
+ {
+ if (NavBar is null) return;
+
+ builder.OpenComponent<_BitNavBarItem>(0);
+ builder.AddComponentParameter(1, nameof(_BitNavBarItem.NavBar), NavBar);
+ builder.AddComponentParameter(2, nameof(_BitNavBarItem.Item), this);
+ builder.CloseComponent();
+ }
+
public void Dispose()
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/NavBar/_BitNavBarItem.razor b/src/BlazorUI/Bit.BlazorUI/Components/Navs/NavBar/_BitNavBarItem.razor
new file mode 100644
index 0000000000..005ba7aabf
--- /dev/null
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/NavBar/_BitNavBarItem.razor
@@ -0,0 +1,43 @@
+@namespace Bit.BlazorUI
+@typeparam TItem where TItem : class
+
+@{
+ var url = NavBar.GetUrl(Item);
+ var template = NavBar.GetTemplate(Item);
+ var isEnabled = NavBar.GetIsEnabled(Item);
+ var href = (isEnabled && (NavBar.SelectedItem != Item || NavBar.Reselectable)) ? url : null;
+}
+
+<_BitNavBarChild Href="@href"
+ Title="@NavBar.GetTitle(Item)"
+ Target="@NavBar.GetTarget(Item)"
+ Style="@NavBar.GetItemCssStyle(Item)"
+ Disabled="@(isEnabled is false)"
+ OnClick="() => NavBar.HandleOnClick(Item)"
+ Class="@NavBar.GetItemCssClass(Item, isEnabled)">
+ @if (template is not null)
+ {
+ @template(Item)
+ }
+ else if (NavBar.ItemTemplate is not null)
+ {
+ @NavBar.ItemTemplate(Item)
+ }
+ else
+ {
+ var icon = NavBar.GetIcon(Item);
+ var iconName = NavBar.GetIconName(Item);
+
+ icon = BitIconInfo.From(icon, iconName);
+
+ @if (icon is not null)
+ {
+ @NavBar.GetText(Item)
+ }
+ }
+
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/NavBar/_BitNavBarItem.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Navs/NavBar/_BitNavBarItem.razor.cs
new file mode 100644
index 0000000000..9625ad7f8c
--- /dev/null
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/NavBar/_BitNavBarItem.razor.cs
@@ -0,0 +1,8 @@
+namespace Bit.BlazorUI;
+
+public partial class _BitNavBarItem where TItem : class
+{
+ [Parameter] public TItem Item { get; set; } = default!;
+
+ [Parameter] public BitNavBar NavBar { get; set; } = default!;
+}
diff --git a/src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/UtilsJsRuntimeExtensions.cs b/src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/UtilsJsRuntimeExtensions.cs
index b57f48cdf7..963696aa5d 100644
--- a/src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/UtilsJsRuntimeExtensions.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/UtilsJsRuntimeExtensions.cs
@@ -20,6 +20,12 @@ internal static ValueTask BitUtilsGetProperty(this IJSRuntime jsRuntime,
}
+ internal static ValueTask BitUtilsGetChildrenAttributes(this IJSRuntime jsRuntime, string containerId, string attribute)
+ {
+ return jsRuntime.Invoke("BitBlazorUI.Utils.getChildrenAttributes", containerId, attribute);
+ }
+
+
internal static ValueTask BitUtilsGetBoundingClientRect(this IJSRuntime jsRuntime, ElementReference element)
{
return jsRuntime.Invoke("BitBlazorUI.Utils.getBoundingClientRect", element);
diff --git a/src/BlazorUI/Bit.BlazorUI/Scripts/Utils.ts b/src/BlazorUI/Bit.BlazorUI/Scripts/Utils.ts
index 796ee99413..c2a662e0ee 100644
--- a/src/BlazorUI/Bit.BlazorUI/Scripts/Utils.ts
+++ b/src/BlazorUI/Bit.BlazorUI/Scripts/Utils.ts
@@ -83,6 +83,18 @@
}
}
+ public static getChildrenAttributes(containerId: string, attribute: string): string[] {
+ const container = document.getElementById(containerId);
+ if (!container) return [];
+
+ try {
+ return Array.from(container.querySelectorAll(`[${attribute}]`)).map(e => e.getAttribute(attribute) || '');
+ } catch (e) {
+ console.error("BitBlazorUI.Utils.getChildrenAttributes:", e);
+ return [];
+ }
+ }
+
public static getBoundingClientRect(element: HTMLElement): Partial {
if (!element) return {};
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/BitButtonTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/Button/BitButtonTests.cs
similarity index 99%
rename from src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/BitButtonTests.cs
rename to src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/Button/BitButtonTests.cs
index 315f56db79..8ba643416a 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/BitButtonTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/Button/BitButtonTests.cs
@@ -3,7 +3,7 @@
using Microsoft.VisualStudio.TestTools.UnitTesting;
using Bunit;
-namespace Bit.BlazorUI.Tests.Components.Buttons;
+namespace Bit.BlazorUI.Tests.Components.Buttons.Button;
[TestClass]
public class BitButtonTests : BunitTestContext
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/ButtonGroup/BitButtonGroupOptionsOrderTest.razor b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/ButtonGroup/BitButtonGroupOptionsOrderTest.razor
new file mode 100644
index 0000000000..8a6b5e3129
--- /dev/null
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/ButtonGroup/BitButtonGroupOptionsOrderTest.razor
@@ -0,0 +1,14 @@
+@using Bit.BlazorUI
+
+
+
+
+@code {
+ [Parameter] public bool ShowMiddle { get; set; }
+}
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/ButtonGroup/BitButtonGroupOptionsOrderTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/ButtonGroup/BitButtonGroupOptionsOrderTests.cs
new file mode 100644
index 0000000000..06ec914da4
--- /dev/null
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/ButtonGroup/BitButtonGroupOptionsOrderTests.cs
@@ -0,0 +1,30 @@
+using System.Linq;
+using Bunit;
+using Microsoft.VisualStudio.TestTools.UnitTesting;
+
+namespace Bit.BlazorUI.Tests.Components.Buttons.ButtonGroup;
+
+[TestClass]
+public class BitButtonGroupOptionsOrderTests : BunitTestContext
+{
+ [TestMethod]
+ public void BitButtonGroupShouldPreserveOptionsOrderWhenAnOptionIsAddedConditionally()
+ {
+ var component = RenderComponent(parameters => parameters.Add(p => p.ShowMiddle, false));
+
+ CollectionAssert.AreEqual(new[] { "First", "Last" }, GetItemTexts(component));
+
+ component.Render(parameters => parameters.Add(p => p.ShowMiddle, true));
+
+ CollectionAssert.AreEqual(new[] { "First", "Middle", "Last" }, GetItemTexts(component));
+
+ component.Render(parameters => parameters.Add(p => p.ShowMiddle, false));
+
+ CollectionAssert.AreEqual(new[] { "First", "Last" }, GetItemTexts(component));
+ }
+
+ private static string[] GetItemTexts(IRenderedComponent component)
+ {
+ return component.FindAll(".bit-btg-btx").Select(e => e.TextContent).ToArray();
+ }
+}
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/BitButtonGroupTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/ButtonGroup/BitButtonGroupTests.cs
similarity index 98%
rename from src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/BitButtonGroupTests.cs
rename to src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/ButtonGroup/BitButtonGroupTests.cs
index d49fe98370..fb78349808 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/BitButtonGroupTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/ButtonGroup/BitButtonGroupTests.cs
@@ -46,7 +46,6 @@ public void BitButtonGroupShouldInvokeOnItemClickAndItemOnClickAction()
});
var btn = component.Find(".bit-btg-itm");
- Assert.IsNotNull(btn);
btn.Click();
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/MenuButton/BitMenuButtonOptionsOrderTest.razor b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/MenuButton/BitMenuButtonOptionsOrderTest.razor
new file mode 100644
index 0000000000..b7fe418f3a
--- /dev/null
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/MenuButton/BitMenuButtonOptionsOrderTest.razor
@@ -0,0 +1,14 @@
+@using Bit.BlazorUI
+
+
+
+
+@code {
+ [Parameter] public bool ShowMiddle { get; set; }
+}
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/MenuButton/BitMenuButtonOptionsOrderTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/MenuButton/BitMenuButtonOptionsOrderTests.cs
new file mode 100644
index 0000000000..a2fef8fe8b
--- /dev/null
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/MenuButton/BitMenuButtonOptionsOrderTests.cs
@@ -0,0 +1,30 @@
+using System.Linq;
+using Bunit;
+using Microsoft.VisualStudio.TestTools.UnitTesting;
+
+namespace Bit.BlazorUI.Tests.Components.Buttons.MenuButton;
+
+[TestClass]
+public class BitMenuButtonOptionsOrderTests : BunitTestContext
+{
+ [TestMethod]
+ public void BitMenuButtonShouldPreserveOptionsOrderWhenAnOptionIsAddedConditionally()
+ {
+ var component = RenderComponent(parameters => parameters.Add(p => p.ShowMiddle, false));
+
+ CollectionAssert.AreEqual(new[] { "First", "Last" }, GetItemTexts(component));
+
+ component.Render(parameters => parameters.Add(p => p.ShowMiddle, true));
+
+ CollectionAssert.AreEqual(new[] { "First", "Middle", "Last" }, GetItemTexts(component));
+
+ component.Render(parameters => parameters.Add(p => p.ShowMiddle, false));
+
+ CollectionAssert.AreEqual(new[] { "First", "Last" }, GetItemTexts(component));
+ }
+
+ private static string[] GetItemTexts(IRenderedComponent component)
+ {
+ return component.FindAll(".bit-mnb-itm .bit-mnb-btx").Select(e => e.TextContent.Trim()).ToArray();
+ }
+}
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/BitMenuButtonTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/MenuButton/BitMenuButtonTests.cs
similarity index 99%
rename from src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/BitMenuButtonTests.cs
rename to src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/MenuButton/BitMenuButtonTests.cs
index 570c6d158b..113ff7603d 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/BitMenuButtonTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/MenuButton/BitMenuButtonTests.cs
@@ -3,7 +3,7 @@
using Microsoft.VisualStudio.TestTools.UnitTesting;
using Bunit;
-namespace Bit.BlazorUI.Tests.Components.Buttons;
+namespace Bit.BlazorUI.Tests.Components.Buttons.MenuButton;
[TestClass]
public class BitMenuButtonTests : BunitTestContext
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/BitToggleButtonTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/ToggleButton/BitToggleButtonTests.cs
similarity index 99%
rename from src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/BitToggleButtonTests.cs
rename to src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/ToggleButton/BitToggleButtonTests.cs
index fad941e11c..3873f38004 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/BitToggleButtonTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/ToggleButton/BitToggleButtonTests.cs
@@ -1,7 +1,7 @@
using Microsoft.VisualStudio.TestTools.UnitTesting;
using Bunit;
-namespace Bit.BlazorUI.Tests.Components.Buttons;
+namespace Bit.BlazorUI.Tests.Components.Buttons.ToggleButton;
[TestClass]
public class BitToggleButtonTests : BunitTestContext
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Extras/AccordionList/BitAccordionListOptionsOrderTest.razor b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Extras/AccordionList/BitAccordionListOptionsOrderTest.razor
new file mode 100644
index 0000000000..7039e3c627
--- /dev/null
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Extras/AccordionList/BitAccordionListOptionsOrderTest.razor
@@ -0,0 +1,14 @@
+@using Bit.BlazorUI
+
+
+
+
+@code {
+ [Parameter] public bool ShowMiddle { get; set; }
+}
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Extras/AccordionList/BitAccordionListOptionsOrderTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Extras/AccordionList/BitAccordionListOptionsOrderTests.cs
new file mode 100644
index 0000000000..80f2947ed1
--- /dev/null
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Extras/AccordionList/BitAccordionListOptionsOrderTests.cs
@@ -0,0 +1,30 @@
+using System.Linq;
+using Bunit;
+using Microsoft.VisualStudio.TestTools.UnitTesting;
+
+namespace Bit.BlazorUI.Tests.Components.Extras.AccordionList;
+
+[TestClass]
+public class BitAccordionListOptionsOrderTests : BunitTestContext
+{
+ [TestMethod]
+ public void BitAccordionListShouldPreserveOptionsOrderWhenAnOptionIsAddedConditionally()
+ {
+ var component = RenderComponent(parameters => parameters.Add(p => p.ShowMiddle, false));
+
+ CollectionAssert.AreEqual(new[] { "First", "Last" }, GetItemTitles(component));
+
+ component.Render(parameters => parameters.Add(p => p.ShowMiddle, true));
+
+ CollectionAssert.AreEqual(new[] { "First", "Middle", "Last" }, GetItemTitles(component));
+
+ component.Render(parameters => parameters.Add(p => p.ShowMiddle, false));
+
+ CollectionAssert.AreEqual(new[] { "First", "Last" }, GetItemTitles(component));
+ }
+
+ private static string[] GetItemTitles(IRenderedComponent component)
+ {
+ return component.FindAll(".bit-acd-ttl").Select(e => e.TextContent).ToArray();
+ }
+}
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupAutoReorderOptionsTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupAutoReorderOptionsTests.cs
new file mode 100644
index 0000000000..6eab7bc2cf
--- /dev/null
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupAutoReorderOptionsTests.cs
@@ -0,0 +1,47 @@
+using System.Collections.Generic;
+using System.Linq;
+using Bunit;
+using Microsoft.VisualStudio.TestTools.UnitTesting;
+
+namespace Bit.BlazorUI.Tests.Components.Inputs.ChoiceGroup;
+
+[TestClass]
+public class BitChoiceGroupAutoReorderOptionsTests : BunitTestContext
+{
+ [TestMethod]
+ public void BitChoiceGroupShouldAssignMarkupOrderIndexWhenAutoReorderOptionsEnabled()
+ {
+ // With AutoReorderOptions the choice group reads the DOM order of the option markers via JS
+ // interop to keep each option's Index in sync with its markup position, so the test feeds the
+ // marker ids (read from the rendered markup, i.e. markup order) back as the result of that call.
+ var handler = Context.JSInterop.Setup("BitBlazorUI.Utils.getChildrenAttributes", _ => true);
+
+ var component = RenderComponent(parameters => parameters.Add(p => p.ShowMiddle, false));
+
+ // The conditionally-shown option registers last, so without the reorder its Index would be 2
+ // while it renders in the middle. The marker ids are supplied only after it is rendered, so the
+ // pending read-back completes with the full, correctly ordered (markup order) set of ids.
+ component.Render(parameters => parameters.Add(p => p.ShowMiddle, true));
+
+ handler.SetResult(GetMarkerIds(component));
+
+ component.WaitForAssertion(() =>
+ {
+ var indexByText = GetIndexByText(component);
+ Assert.AreEqual(0, indexByText["First"]);
+ Assert.AreEqual(1, indexByText["Middle"]);
+ Assert.AreEqual(2, indexByText["Last"]);
+ });
+ }
+
+ private static string[] GetMarkerIds(IRenderedComponent component)
+ {
+ return component.FindAll("[data-bit-chg-opt]").Select(e => e.GetAttribute("data-bit-chg-opt")!).ToArray();
+ }
+
+ private static Dictionary GetIndexByText(IRenderedComponent component)
+ {
+ return component.FindComponents>()
+ .ToDictionary(c => c.Instance.Text!, c => c.Instance.Index);
+ }
+}
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupAutoReorderTest.razor b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupAutoReorderTest.razor
new file mode 100644
index 0000000000..558106467f
--- /dev/null
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupAutoReorderTest.razor
@@ -0,0 +1,14 @@
+@using Bit.BlazorUI
+
+
+
+
+@code {
+ [Parameter] public bool ShowMiddle { get; set; }
+}
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupOptionsOrderTest.razor b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupOptionsOrderTest.razor
new file mode 100644
index 0000000000..573f448789
--- /dev/null
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupOptionsOrderTest.razor
@@ -0,0 +1,14 @@
+@using Bit.BlazorUI
+
+
+
+
+@code {
+ [Parameter] public bool ShowMiddle { get; set; }
+}
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupOptionsOrderTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupOptionsOrderTests.cs
new file mode 100644
index 0000000000..d061c329b8
--- /dev/null
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupOptionsOrderTests.cs
@@ -0,0 +1,30 @@
+using System.Linq;
+using Bunit;
+using Microsoft.VisualStudio.TestTools.UnitTesting;
+
+namespace Bit.BlazorUI.Tests.Components.Inputs.ChoiceGroup;
+
+[TestClass]
+public class BitChoiceGroupOptionsOrderTests : BunitTestContext
+{
+ [TestMethod]
+ public void BitChoiceGroupShouldPreserveOptionsOrderWhenAnOptionIsAddedConditionally()
+ {
+ var component = RenderComponent(parameters => parameters.Add(p => p.ShowMiddle, false));
+
+ CollectionAssert.AreEqual(new[] { "First", "Last" }, GetItemTexts(component));
+
+ component.Render(parameters => parameters.Add(p => p.ShowMiddle, true));
+
+ CollectionAssert.AreEqual(new[] { "First", "Middle", "Last" }, GetItemTexts(component));
+
+ component.Render(parameters => parameters.Add(p => p.ShowMiddle, false));
+
+ CollectionAssert.AreEqual(new[] { "First", "Last" }, GetItemTexts(component));
+ }
+
+ private static string[] GetItemTexts(IRenderedComponent component)
+ {
+ return component.FindAll(".bit-chg-itx").Select(e => e.TextContent).ToArray();
+ }
+}
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/Dropdown/BitDropdownOptionsOrderTest.razor b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/Dropdown/BitDropdownOptionsOrderTest.razor
new file mode 100644
index 0000000000..74b5b435be
--- /dev/null
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/Dropdown/BitDropdownOptionsOrderTest.razor
@@ -0,0 +1,14 @@
+@using Bit.BlazorUI
+
+
+
+
+@code {
+ [Parameter] public bool ShowMiddle { get; set; }
+}
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/Dropdown/BitDropdownOptionsOrderTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/Dropdown/BitDropdownOptionsOrderTests.cs
new file mode 100644
index 0000000000..9208b17fd9
--- /dev/null
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/Dropdown/BitDropdownOptionsOrderTests.cs
@@ -0,0 +1,30 @@
+using System.Linq;
+using Bunit;
+using Microsoft.VisualStudio.TestTools.UnitTesting;
+
+namespace Bit.BlazorUI.Tests.Components.Inputs.Dropdown;
+
+[TestClass]
+public class BitDropdownOptionsOrderTests : BunitTestContext
+{
+ [TestMethod]
+ public void BitDropdownShouldPreserveOptionsOrderWhenAnOptionIsAddedConditionally()
+ {
+ var component = RenderComponent(parameters => parameters.Add(p => p.ShowMiddle, false));
+
+ CollectionAssert.AreEqual(new[] { "First", "Last" }, GetItemTexts(component));
+
+ component.Render(parameters => parameters.Add(p => p.ShowMiddle, true));
+
+ CollectionAssert.AreEqual(new[] { "First", "Middle", "Last" }, GetItemTexts(component));
+
+ component.Render(parameters => parameters.Add(p => p.ShowMiddle, false));
+
+ CollectionAssert.AreEqual(new[] { "First", "Last" }, GetItemTexts(component));
+ }
+
+ private static string[] GetItemTexts(IRenderedComponent component)
+ {
+ return component.FindAll(".bit-drp-itm").Select(e => e.TextContent.Trim()).ToArray();
+ }
+}
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Lists/Timeline/BitTimelineOptionsOrderTest.razor b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Lists/Timeline/BitTimelineOptionsOrderTest.razor
new file mode 100644
index 0000000000..c2092ece65
--- /dev/null
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Lists/Timeline/BitTimelineOptionsOrderTest.razor
@@ -0,0 +1,14 @@
+@using Bit.BlazorUI
+
+
+
+
+@code {
+ [Parameter] public bool ShowMiddle { get; set; }
+}
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Lists/Timeline/BitTimelineOptionsOrderTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Lists/Timeline/BitTimelineOptionsOrderTests.cs
new file mode 100644
index 0000000000..dfaa9d7796
--- /dev/null
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Lists/Timeline/BitTimelineOptionsOrderTests.cs
@@ -0,0 +1,30 @@
+using System.Linq;
+using Bunit;
+using Microsoft.VisualStudio.TestTools.UnitTesting;
+
+namespace Bit.BlazorUI.Tests.Components.Lists.Timeline;
+
+[TestClass]
+public class BitTimelineOptionsOrderTests : BunitTestContext
+{
+ [TestMethod]
+ public void BitTimelineShouldPreserveOptionsOrderWhenAnOptionIsAddedConditionally()
+ {
+ var component = RenderComponent(parameters => parameters.Add(p => p.ShowMiddle, false));
+
+ CollectionAssert.AreEqual(new[] { "First", "Last" }, GetItemTexts(component));
+
+ component.Render(parameters => parameters.Add(p => p.ShowMiddle, true));
+
+ CollectionAssert.AreEqual(new[] { "First", "Middle", "Last" }, GetItemTexts(component));
+
+ component.Render(parameters => parameters.Add(p => p.ShowMiddle, false));
+
+ CollectionAssert.AreEqual(new[] { "First", "Last" }, GetItemTexts(component));
+ }
+
+ private static string[] GetItemTexts(IRenderedComponent component)
+ {
+ return component.FindAll(".bit-tln-pcn .bit-tln-ttx").Select(e => e.TextContent).ToArray();
+ }
+}
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Navs/Breadcrumb/BitBreadcrumbAutoReorderOptionsTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Navs/Breadcrumb/BitBreadcrumbAutoReorderOptionsTests.cs
new file mode 100644
index 0000000000..ed59709d21
--- /dev/null
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Navs/Breadcrumb/BitBreadcrumbAutoReorderOptionsTests.cs
@@ -0,0 +1,41 @@
+using System.Collections.Generic;
+using System.Linq;
+using Bunit;
+using Microsoft.VisualStudio.TestTools.UnitTesting;
+
+namespace Bit.BlazorUI.Tests.Components.Navs.Breadcrumb;
+
+[TestClass]
+public class BitBreadcrumbAutoReorderOptionsTests : BunitTestContext
+{
+ [TestMethod]
+ public void BitBreadcrumbShouldReorderOptionsOnPureMoveWhenAutoReorderOptionsEnabled()
+ {
+ // A pure reorder of keyed options moves the existing option components (and their markers) without
+ // registering or unregistering anything. With AutoReorderOptions the breadcrumb still re-reads the
+ // DOM marker order after the render, so the displayed order follows the new markup order.
+ var handler = Context.JSInterop.Setup("BitBlazorUI.Utils.getChildrenAttributes", _ => true);
+
+ var component = RenderComponent(
+ parameters => parameters.Add(p => p.Items, ["A", "B", "C"]));
+
+ component.WaitForAssertion(() => CollectionAssert.AreEqual(new[] { "A", "B", "C" }, GetItemTexts(component)));
+
+ // Re-sort the source list; the @key'd options are moved, not recreated (no register/unregister).
+ component.Render(parameters => parameters.Add(p => p.Items, ["C", "A", "B"]));
+
+ handler.SetResult(GetMarkerIds(component));
+
+ component.WaitForAssertion(() => CollectionAssert.AreEqual(new[] { "C", "A", "B" }, GetItemTexts(component)));
+ }
+
+ private static string[] GetItemTexts(IRenderedComponent component)
+ {
+ return component.FindAll(".bit-brc-itm").Select(e => e.TextContent.Trim()).ToArray();
+ }
+
+ private static string[] GetMarkerIds(IRenderedComponent component)
+ {
+ return component.FindAll("[data-bit-brc-opt]").Select(e => e.GetAttribute("data-bit-brc-opt")!).ToArray();
+ }
+}
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Navs/Breadcrumb/BitBreadcrumbAutoReorderTest.razor b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Navs/Breadcrumb/BitBreadcrumbAutoReorderTest.razor
new file mode 100644
index 0000000000..c4094925f2
--- /dev/null
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Navs/Breadcrumb/BitBreadcrumbAutoReorderTest.razor
@@ -0,0 +1,13 @@
+@using System.Collections.Generic
+@using Bit.BlazorUI
+
+
+ @foreach (var item in Items)
+ {
+
+
+@code {
+ [Parameter] public List Items { get; set; } = [];
+}
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Navs/Breadcrumb/BitBreadcrumbOptionsOrderTest.razor b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Navs/Breadcrumb/BitBreadcrumbOptionsOrderTest.razor
new file mode 100644
index 0000000000..181d1e6be0
--- /dev/null
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Navs/Breadcrumb/BitBreadcrumbOptionsOrderTest.razor
@@ -0,0 +1,14 @@
+@using Bit.BlazorUI
+
+
+
+
+@code {
+ [Parameter] public bool ShowMiddle { get; set; }
+}
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Navs/Breadcrumb/BitBreadcrumbOptionsOrderTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Navs/Breadcrumb/BitBreadcrumbOptionsOrderTests.cs
new file mode 100644
index 0000000000..16248fd812
--- /dev/null
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Navs/Breadcrumb/BitBreadcrumbOptionsOrderTests.cs
@@ -0,0 +1,46 @@
+using System.Linq;
+using Bunit;
+using Microsoft.VisualStudio.TestTools.UnitTesting;
+
+namespace Bit.BlazorUI.Tests.Components.Navs.Breadcrumb;
+
+[TestClass]
+public class BitBreadcrumbOptionsOrderTests : BunitTestContext
+{
+ [TestMethod]
+ public void BitBreadcrumbShouldPreserveOptionsOrderWhenAnOptionIsAddedConditionally()
+ {
+ // The breadcrumb reads the DOM order of the option markers via JS interop to keep the order of
+ // its registered items in sync with the markup order of the options, so the test provides the
+ // marker ids (read from the rendered markup) as the result of that JS call. The result is set
+ // only after the conditional option is rendered, so the earlier (pending) invocations complete
+ // with the full, correctly ordered set of marker ids.
+ var handler = Context.JSInterop.Setup("BitBlazorUI.Utils.getChildrenAttributes", _ => true);
+
+ var component = RenderComponent(parameters => parameters.Add(p => p.ShowMiddle, false));
+
+ CollectionAssert.AreEqual(new[] { "First", "Last" }, GetItemTexts(component));
+
+ component.Render(parameters => parameters.Add(p => p.ShowMiddle, true));
+
+ handler.SetResult(GetMarkerIds(component));
+
+ component.WaitForAssertion(() => CollectionAssert.AreEqual(new[] { "First", "Middle", "Last" }, GetItemTexts(component)));
+
+ component.Render(parameters => parameters.Add(p => p.ShowMiddle, false));
+
+ handler.SetResult(GetMarkerIds(component));
+
+ component.WaitForAssertion(() => CollectionAssert.AreEqual(new[] { "First", "Last" }, GetItemTexts(component)));
+ }
+
+ private static string[] GetItemTexts(IRenderedComponent component)
+ {
+ return component.FindAll(".bit-brc-itm").Select(e => e.TextContent.Trim()).ToArray();
+ }
+
+ private static string[] GetMarkerIds(IRenderedComponent component)
+ {
+ return component.FindAll("[data-bit-brc-opt]").Select(e => e.GetAttribute("data-bit-brc-opt")!).ToArray();
+ }
+}
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Navs/Nav/BitNavOptionsOrderTest.razor b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Navs/Nav/BitNavOptionsOrderTest.razor
new file mode 100644
index 0000000000..50b60ce88e
--- /dev/null
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Navs/Nav/BitNavOptionsOrderTest.razor
@@ -0,0 +1,21 @@
+@using Bit.BlazorUI
+
+
+
+
+ @if (ShowMiddle)
+ {
+
+
+@code {
+ [Parameter] public bool ShowMiddle { get; set; }
+}
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Navs/Nav/BitNavOptionsOrderTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Navs/Nav/BitNavOptionsOrderTests.cs
new file mode 100644
index 0000000000..42148477f5
--- /dev/null
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Navs/Nav/BitNavOptionsOrderTests.cs
@@ -0,0 +1,30 @@
+using System.Linq;
+using Bunit;
+using Microsoft.VisualStudio.TestTools.UnitTesting;
+
+namespace Bit.BlazorUI.Tests.Components.Navs.Nav;
+
+[TestClass]
+public class BitNavOptionsOrderTests : BunitTestContext
+{
+ [TestMethod]
+ public void BitNavShouldPreserveOptionsOrderWhenAnOptionIsAddedConditionally()
+ {
+ var component = RenderComponent(parameters => parameters.Add(p => p.ShowMiddle, false));
+
+ CollectionAssert.AreEqual(new[] { "First", "Child1", "Child2", "Last" }, GetItemTexts(component));
+
+ component.Render(parameters => parameters.Add(p => p.ShowMiddle, true));
+
+ CollectionAssert.AreEqual(new[] { "First", "Child1", "ChildMiddle", "Child2", "Middle", "Last" }, GetItemTexts(component));
+
+ component.Render(parameters => parameters.Add(p => p.ShowMiddle, false));
+
+ CollectionAssert.AreEqual(new[] { "First", "Child1", "Child2", "Last" }, GetItemTexts(component));
+ }
+
+ private static string[] GetItemTexts(IRenderedComponent component)
+ {
+ return component.FindAll(".bit-nav-itx").Select(e => e.TextContent).ToArray();
+ }
+}
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Navs/NavBar/BitNavBarAutomaticSelectionTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Navs/NavBar/BitNavBarAutomaticSelectionTests.cs
new file mode 100644
index 0000000000..5cbf3edc2e
--- /dev/null
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Navs/NavBar/BitNavBarAutomaticSelectionTests.cs
@@ -0,0 +1,29 @@
+using System.Linq;
+using Bunit;
+using Microsoft.AspNetCore.Components;
+using Microsoft.Extensions.DependencyInjection;
+using Microsoft.VisualStudio.TestTools.UnitTesting;
+
+namespace Bit.BlazorUI.Tests.Components.Navs.NavBar;
+
+[TestClass]
+public class BitNavBarAutomaticSelectionTests : BunitTestContext
+{
+ [TestMethod]
+ public void BitNavBarShouldSelectItemMatchingCurrentUrlInAutomaticMode()
+ {
+ // In Automatic mode the options request the URL match as they register, but the match is now
+ // deferred to a single pass in OnAfterRender (to avoid an O(n^2) match-per-registration mount).
+ // This verifies that deferred pass still selects the option whose Url matches the current URL.
+ var navigationManager = Services.GetRequiredService();
+ navigationManager.NavigateTo("/profile");
+
+ var component = RenderComponent();
+
+ var items = component.FindAll(".bit-nbr-itm");
+ Assert.AreEqual(3, items.Count);
+ Assert.IsFalse(items[0].ClassList.Contains("bit-nbr-sel"));
+ Assert.IsTrue(items[1].ClassList.Contains("bit-nbr-sel"));
+ Assert.IsFalse(items[2].ClassList.Contains("bit-nbr-sel"));
+ }
+}
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Navs/NavBar/BitNavBarAutomaticTest.razor b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Navs/NavBar/BitNavBarAutomaticTest.razor
new file mode 100644
index 0000000000..434a75fb24
--- /dev/null
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Navs/NavBar/BitNavBarAutomaticTest.razor
@@ -0,0 +1,7 @@
+@using Bit.BlazorUI
+
+
+
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Navs/NavBar/BitNavBarOptionsTest.razor b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Navs/NavBar/BitNavBarOptionsTest.razor
new file mode 100644
index 0000000000..dba8970ba5
--- /dev/null
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Navs/NavBar/BitNavBarOptionsTest.razor
@@ -0,0 +1,16 @@
+@using Bit.BlazorUI
+
+
+
+
+@code {
+ [Parameter] public bool ShowMiddle { get; set; }
+
+ [Parameter] public BitNavMode Mode { get; set; }
+}
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Navs/NavBar/BitNavBarTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Navs/NavBar/BitNavBarTests.cs
index dd3c63ca99..e89ca218de 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Navs/NavBar/BitNavBarTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Navs/NavBar/BitNavBarTests.cs
@@ -1,4 +1,5 @@
-using Bunit;
+using System.Linq;
+using Bunit;
using Microsoft.VisualStudio.TestTools.UnitTesting;
namespace Bit.BlazorUI.Tests.Components.Navs.NavBar;
@@ -101,6 +102,63 @@ public void BitNavBarShouldRespectColor(BitColor? color, string expectedClass)
Assert.IsTrue(root.ClassList.Contains(expectedClass));
}
+ [TestMethod]
+ [DataRow(BitNavMode.Automatic)]
+ [DataRow(BitNavMode.Manual)]
+ public void BitNavBarShouldPreserveOptionsOrderWhenAnOptionIsAddedConditionally(BitNavMode mode)
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Mode, mode);
+ parameters.Add(p => p.ShowMiddle, false);
+ });
+
+ CollectionAssert.AreEqual(new[] { "Home", "Settings" }, GetItemTexts(component));
+
+ component.Render(parameters => parameters.Add(p => p.ShowMiddle, true));
+
+ CollectionAssert.AreEqual(new[] { "Home", "Profile", "Settings" }, GetItemTexts(component));
+
+ component.Render(parameters => parameters.Add(p => p.ShowMiddle, false));
+
+ CollectionAssert.AreEqual(new[] { "Home", "Settings" }, GetItemTexts(component));
+
+ component.Render(parameters => parameters.Add(p => p.ShowMiddle, true));
+
+ CollectionAssert.AreEqual(new[] { "Home", "Profile", "Settings" }, GetItemTexts(component));
+ }
+
+ [TestMethod]
+ public void BitNavBarShouldUpdateOptionsSelectedStateOnClickInManualMode()
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Mode, BitNavMode.Manual);
+ parameters.Add(p => p.ShowMiddle, true);
+ });
+
+ var items = component.FindAll(".bit-nbr-itm");
+ Assert.AreEqual(3, items.Count);
+
+ items[1].Click();
+
+ items = component.FindAll(".bit-nbr-itm");
+ Assert.IsFalse(items[0].ClassList.Contains("bit-nbr-sel"));
+ Assert.IsTrue(items[1].ClassList.Contains("bit-nbr-sel"));
+ Assert.IsFalse(items[2].ClassList.Contains("bit-nbr-sel"));
+
+ items[2].Click();
+
+ items = component.FindAll(".bit-nbr-itm");
+ Assert.IsFalse(items[1].ClassList.Contains("bit-nbr-sel"));
+ Assert.IsTrue(items[2].ClassList.Contains("bit-nbr-sel"));
+ }
+
+ private static string[] GetItemTexts(IRenderedComponent component)
+ {
+ return component.FindAll(".bit-nbr-txt").Select(e => e.TextContent).ToArray();
+ }
+
[TestMethod]
public void BitNavBarShouldRespectHtmlAttributes()
{