Skip to content

Commit 3826fcc

Browse files
mckaragozmckaragoz
authored
Select: Fix Chip Doesn't Show on Some Situations (#199)
* Some Select Bug Fixes * Fix A Line
1 parent 3c4acf5 commit 3826fcc

File tree

3 files changed

+140
-95
lines changed

3 files changed

+140
-95
lines changed

‎CodeBeam.MudBlazor.Extensions/Components/SelectExtended/MudSelectExtended.razor‎

Lines changed: 101 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -5,137 +5,147 @@
55

66
<CascadingValue Name="Standalone" Value="false" IsFixed="true">
77
<CascadingValue Value="@this" IsFixed="true">
8-
<div class="mud-select-extended" id="@_elementId">
9-
<MudInputControl Label="@Label" Variant="@Variant" HelperText="@HelperText" HelperTextOnFocus="@HelperTextOnFocus" FullWidth="@FullWidth" Margin="@Margin" Class="@Classname" Style="@Style"
10-
Error="@Error" ErrorText="@ErrorText" ErrorId="@ErrorId" Disabled="@Disabled" @onclick="@ToggleMenu" Required="@Required" ForId="@FieldId">
11-
<InputContent>
12-
<MudInputExtended @ref="_elementReference" InputType="InputType.Hidden" MockInputStyle="@(ValuePresenter == ValuePresenter.Chip ? "width: 0px" : null)"
13-
Class="@InputClassname" Style="@InputStyle" Margin="@Margin" Placeholder="@Placeholder"
14-
Variant="@Variant"
15-
TextUpdateSuppression="false"
16-
Value="@(Strict && !IsValueInList ? null : Text)" DisableUnderLine="@DisableUnderLine"
17-
Disabled="@Disabled" ReadOnly="true" Error="@Error" ErrorId="@ErrorId"
18-
Clearable="@Clearable" OnClearButtonClick="(async (e) => await SelectClearButtonClickHandlerAsync(e))"
19-
@attributes="UserAttributes" OnBlur="@OnLostFocus" ForceShrink="@ForceShrink">
8+
<div class="mud-select-extended" id="@_elementId">
9+
<MudInputControl Label="@Label" Variant="@Variant" HelperText="@HelperText" HelperTextOnFocus="@HelperTextOnFocus" FullWidth="@FullWidth" Margin="@Margin" Class="@Classname" Style="@Style"
10+
Error="@Error" ErrorText="@ErrorText" ErrorId="@ErrorId" Disabled="@Disabled" @onclick="@ToggleMenu" Required="@Required" ForId="@FieldId">
11+
<InputContent>
12+
<MudInputExtended @ref="_elementReference" InputType="InputType.Hidden" MockInputStyle="@(ValuePresenter == ValuePresenter.Chip ? "width: 0px" : null)"
13+
Class="@InputClassname" Style="@InputStyle" Margin="@Margin" Placeholder="@Placeholder"
14+
Variant="@Variant"
15+
TextUpdateSuppression="false"
16+
Value="@(Strict && !IsValueInList ? null : Text)" DisableUnderLine="@DisableUnderLine"
17+
Disabled="@Disabled" ReadOnly="true" Error="@Error" ErrorId="@ErrorId"
18+
Clearable="@Clearable" OnClearButtonClick="(async (e) => await SelectClearButtonClickHandlerAsync(e))"
19+
@attributes="UserAttributes" OnBlur="@OnLostFocus" ForceShrink="@ForceShrink">
2020

21-
<AdornmentEnd>
22-
<MudIcon Icon="@_currentIcon" Color="@AdornmentColor" Size="@IconSize" @onclick="OnAdornmentClick" />
23-
</AdornmentEnd>
21+
<AdornmentEnd>
22+
<MudIcon Icon="@_currentIcon" Color="@AdornmentColor" Size="@IconSize" @onclick="OnAdornmentClick" />
23+
</AdornmentEnd>
2424

25-
<DataVisualiser>
26-
@if (ValuePresenter == ValuePresenter.Chip)
27-
{
28-
<MudChipSet Class="d-flex flex-wrap mud-width-full" Style="row-gap: 4px" AllClosable="ChipCloseable" OnClose="ChipClosed">
29-
@foreach (var item in Items?.Where(x => SelectedValues.Contains(x.Value)) ?? new List<MudSelectItemExtended<T>>())
30-
{
31-
<MudChip Class="@ChipClass" Value="item.Value" Text="@(string.IsNullOrEmpty(item.Text) ? Converter.Set(item.Value) : item.Text)" Color="@Color" Size="@ChipSize" Variant="@ChipVariant" />
32-
}
33-
</MudChipSet>
34-
}
35-
</DataVisualiser>
36-
37-
<ChildContent>
38-
<div class="@TemplateClass">
39-
@if (Strict && !IsValueInList)
25+
<DataVisualiser>
26+
@if (ValuePresenter == ValuePresenter.Chip)
4027
{
41-
//Show nothing
42-
<MudText Typo="Typo.body1" Class="mud-text-secondary">@Placeholder</MudText>
28+
<MudChipSet Class="d-flex flex-wrap mud-width-full" Style="row-gap: 4px" AllClosable="ChipCloseable" OnClose="ChipClosed">
29+
@if (ItemCollection != null)
30+
{
31+
foreach (var item in ItemCollection.Where(x => SelectedValues.Contains(x)))
32+
{
33+
<MudChip Class="@ChipClass" Value="@item" Text="@Converter.Set(item)" Color="@Color" Size="@ChipSize" Variant="@ChipVariant" />
34+
}
35+
}
36+
else
37+
{
38+
foreach (var item in Items?.Where(x => SelectedValues.Contains(x.Value)) ?? new List<MudSelectItemExtended<T>>())
39+
{
40+
<MudChip Class="@ChipClass" Value="item.Value" Text="@(string.IsNullOrEmpty(item.Text) ? Converter.Set(item.Value) : item.Text)" Color="@Color" Size="@ChipSize" Variant="@ChipVariant" />
41+
}
42+
}
43+
</MudChipSet>
4344
}
44-
else if (ValuePresenter == ValuePresenter.Text)
45-
{
46-
@if (string.IsNullOrEmpty(Text))
47-
{
48-
<MudText Typo="Typo.body1" Class="mud-text-secondary">@Placeholder</MudText>
49-
}
45+
</DataVisualiser>
5046

51-
<MudRender>@GetSelectTextPresenter()</MudRender>
52-
}
53-
else if (ValuePresenter == ValuePresenter.Chip)
54-
{
55-
if (SelectedValues == null || !SelectedValues.Any())
47+
<ChildContent>
48+
<div class="@TemplateClass">
49+
@if (Strict && !IsValueInList)
5650
{
51+
//Show nothing
5752
<MudText Typo="Typo.body1" Class="mud-text-secondary">@Placeholder</MudText>
5853
}
59-
else
60-
{
61-
@*Chips show under DataVisualiser RenderFragment*@
62-
}
63-
}
64-
else if (ValuePresenter == ValuePresenter.ItemContent)
65-
{
66-
if (SelectedListItem == null)
54+
else if (ValuePresenter == ValuePresenter.Text)
6755
{
68-
<MudText Typo="Typo.body1" Class="mud-text-secondary">@Placeholder</MudText>
56+
@if (string.IsNullOrEmpty(Text))
57+
{
58+
<MudText Typo="Typo.body1" Class="mud-text-secondary">@Placeholder</MudText>
59+
}
6960

61+
<MudRender>@GetSelectTextPresenter()</MudRender>
7062
}
71-
else if (ItemTemplate != null)
63+
else if (ValuePresenter == ValuePresenter.Chip)
7264
{
73-
if (SelectedListItem != null && SelectedListItem.Value != null)
65+
if (SelectedValues == null || !SelectedValues.Any())
7466
{
75-
@ItemTemplate(SelectedListItem)
67+
<MudText Typo="Typo.body1" Class="mud-text-secondary">@Placeholder</MudText>
7668
}
77-
else if (!string.IsNullOrEmpty(Placeholder))
69+
else
7870
{
79-
<MudText Typo="Typo.body1" Class="mud-text-secondary">@Placeholder</MudText>
71+
@*Chips show under DataVisualiser RenderFragment*@
8072
}
8173
}
82-
else if (SelectedListItem.ChildContent != null)
83-
{
84-
<MudRender>@SelectedListItem.ChildContent</MudRender>
85-
}
86-
else
74+
else if (ValuePresenter == ValuePresenter.ItemContent)
8775
{
88-
@if (string.IsNullOrEmpty(Text))
76+
if (SelectedListItem == null)
8977
{
9078
<MudText Typo="Typo.body1" Class="mud-text-secondary">@Placeholder</MudText>
79+
9180
}
81+
else if (ItemTemplate != null)
82+
{
83+
if (SelectedListItem != null && SelectedListItem.Value != null)
84+
{
85+
@ItemTemplate(SelectedListItem)
86+
}
87+
else if (!string.IsNullOrEmpty(Placeholder))
88+
{
89+
<MudText Typo="Typo.body1" Class="mud-text-secondary">@Placeholder</MudText>
90+
}
91+
}
92+
else if (SelectedListItem.ChildContent != null)
93+
{
94+
<MudRender>@SelectedListItem.ChildContent</MudRender>
95+
}
96+
else
97+
{
98+
@if (string.IsNullOrEmpty(Text))
99+
{
100+
<MudText Typo="Typo.body1" Class="mud-text-secondary">@Placeholder</MudText>
101+
}
92102

93-
<MudRender>@GetSelectTextPresenter()</MudRender>
103+
<MudRender>@GetSelectTextPresenter()</MudRender>
104+
}
94105
}
95-
}
96-
</div>
97-
</ChildContent>
98-
</MudInputExtended>
106+
</div>
107+
</ChildContent>
108+
</MudInputExtended>
99109

100110
<MudPopover Open="@_isOpen" MaxHeight="@MaxHeight" AnchorOrigin="@AnchorOrigin" TransformOrigin="@TransformOrigin" Class="@PopoverClass" RelativeWidth="@RelativeWidth">
101-
<CascadingValue Value="@this" IsFixed="true">
102-
<MudListExtended @ref="@_list" T="T" @bind-SelectedValue="@Value" @bind-SelectedValues="@SelectedValues" @bind-SelectedItem="@SelectedListItem" @bind-SelectedItems="@SelectedListItems"
103-
Clickable="true" Color="@Color" Dense="@Dense" ItemCollection="@ItemCollection" Virtualize="@Virtualize" DisablePadding="@DisablePopoverPadding" DisableSelectedItemStyle="@DisableSelectedItemStyle"
104-
MultiSelection="@MultiSelection" MultiSelectionComponent="@MultiSelectionComponent" MultiSelectionAlign="@MultiSelectionAlign" SelectAll="@SelectAll" SelectAllPosition="@SelectAllPosition" SelectAllText="@SelectAllText"
105-
CheckedIcon="@CheckedIcon" UncheckedIcon="@UncheckedIcon" IndeterminateIcon="@IndeterminateIcon" SelectValueOnTab="@SelectValueOnTab" Comparer="@Comparer"
106-
ItemTemplate="@ItemTemplate" ItemSelectedTemplate="@ItemSelectedTemplate" ItemDisabledTemplate="@ItemDisabledTemplate" SearchBox="@SearchBox" SearchBoxAutoFocus="@SearchBoxAutoFocus" SearchFunc="@SearchFunc" SearchBoxPlaceholder="@SearchBoxPlaceholder" SearchBoxClearable="@SearchBoxClearable" ToStringFunc="@ToStringFunc">
107-
@ChildContent
108-
</MudListExtended>
109-
</CascadingValue>
110-
</MudPopover>
111-
</InputContent>
112-
</MudInputControl>
113-
</div>
111+
<CascadingValue Value="@this" IsFixed="true">
112+
<MudListExtended @ref="@_list" T="T" @bind-SelectedValue="@Value" @bind-SelectedValues="@SelectedValues" @bind-SelectedItem="@SelectedListItem" @bind-SelectedItems="@SelectedListItems"
113+
Clickable="true" Color="@Color" Dense="@Dense" ItemCollection="@ItemCollection" Virtualize="@Virtualize" DisablePadding="@DisablePopoverPadding" DisableSelectedItemStyle="@DisableSelectedItemStyle"
114+
MultiSelection="@MultiSelection" MultiSelectionComponent="@MultiSelectionComponent" MultiSelectionAlign="@MultiSelectionAlign" SelectAll="@SelectAll" SelectAllPosition="@SelectAllPosition" SelectAllText="@SelectAllText"
115+
CheckedIcon="@CheckedIcon" UncheckedIcon="@UncheckedIcon" IndeterminateIcon="@IndeterminateIcon" SelectValueOnTab="@SelectValueOnTab" Comparer="@Comparer"
116+
ItemTemplate="@ItemTemplate" ItemSelectedTemplate="@ItemSelectedTemplate" ItemDisabledTemplate="@ItemDisabledTemplate" SearchBox="@SearchBox" SearchBoxAutoFocus="@SearchBoxAutoFocus" SearchFunc="@SearchFunc" SearchBoxPlaceholder="@SearchBoxPlaceholder" SearchBoxClearable="@SearchBoxClearable" ToStringFunc="@ToStringFunc">
117+
@ChildContent
118+
</MudListExtended>
119+
</CascadingValue>
120+
</MudPopover>
121+
</InputContent>
122+
</MudInputControl>
123+
</div>
114124

115-
@*To Be Discussed as Second ShadowItems: Needed to render directly into select to has initial values*@
125+
@*To Be Discussed as Second ShadowItems: Needed to render directly into select to has initial values*@
116126

117-
<div style="display: none">
118-
<CascadingValue Value="@this" IsFixed="true">
127+
<div style="display: none">
128+
<CascadingValue Value="@this" IsFixed="true">
119129
<MudListExtended T="T" @bind-SelectedValue="@Value" @bind-SelectedValues="@SelectedValues" @bind-SelectedItem="@SelectedListItem" @bind-SelectedItems="@SelectedListItems"
120130
Clickable="true" Color="@Color" Dense="@Dense" ItemCollection="@ItemCollection" Virtualize="@Virtualize" DisablePadding="@DisablePopoverPadding" DisableSelectedItemStyle="@DisableSelectedItemStyle"
121131
MultiSelection="@MultiSelection" MultiSelectionComponent="@MultiSelectionComponent" MultiSelectionAlign="@MultiSelectionAlign" SelectAll="@SelectAll" SelectAllPosition="@SelectAllPosition" SelectAllText="@SelectAllText"
122132
CheckedIcon="@CheckedIcon" UncheckedIcon="@UncheckedIcon" IndeterminateIcon="@IndeterminateIcon" SelectValueOnTab="@SelectValueOnTab" Comparer="@Comparer"
123133
ItemTemplate="@ItemTemplate" ItemSelectedTemplate="@ItemSelectedTemplate" ItemDisabledTemplate="@ItemDisabledTemplate" SearchBox="@SearchBox" SearchBoxAutoFocus="@SearchBoxAutoFocus" SearchFunc="@SearchFunc" SearchBoxPlaceholder="@SearchBoxPlaceholder" SearchBoxClearable="@SearchBoxClearable" ToStringFunc="@ToStringFunc">
124-
@ChildContent
125-
</MudListExtended>
134+
@ChildContent
135+
</MudListExtended>
126136
</CascadingValue>
127-
</div>
137+
</div>
128138
</CascadingValue>
129139

130140
@*Shadow select items for IsValueInList and CanRenderValue*@
131141
<CascadingValue Value="@((IMudShadowSelectExtended)this)" IsFixed="true">
132142
<CascadingValue Name="HideContent" Value="true">
133-
@ChildContent
134-
</CascadingValue>
135-
</CascadingValue>
143+
@ChildContent
144+
</CascadingValue>
145+
</CascadingValue>
146+
136147

137148

138-
139149
</CascadingValue>
140150
<!-- mousedown instead of click needed to close the menu before OnLostFocus runs -->
141151
<MudOverlay Visible="_isOpen" @onmousedown="@(() => CloseMenu())" LockScroll="@LockScroll" />

‎CodeBeam.MudBlazor.Extensions/Components/SelectExtended/MudSelectExtended.razor.cs‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ public MudSelectExtended()
5656
.Build();
5757

5858
private string _elementId = "select_" + Guid.NewGuid().ToString().Substring(0, 8);
59+
private string _popoverId = "selectpopover_" + Guid.NewGuid().ToString().Substring(0, 8);
5960

6061
/// <summary>
6162
/// User class names for the input, separated by space
@@ -879,7 +880,6 @@ public async Task OpenMenu()
879880

880881
//disable escape propagation: if selectmenu is open, only the select popover should close and underlying components should not handle escape key
881882
await _keyInterceptor.UpdateKey(new() { Key = "Escape", StopDown = "Key+none" });
882-
883883
await OnOpen.InvokeAsync();
884884
}
885885

@@ -966,9 +966,9 @@ public override async Task ForceUpdate()
966966
}
967967
}
968968

969-
public void BeginValidatePublic()
969+
public async Task BeginValidatePublic()
970970
{
971-
BeginValidate();
971+
await BeginValidateAsync();
972972
}
973973

974974
protected internal bool Add(MudSelectItemExtended<T> item)
@@ -1108,7 +1108,12 @@ protected override bool HasValue(T value)
11081108

11091109
protected async Task ChipClosed(MudChip chip)
11101110
{
1111-
SelectedValues = SelectedValues.Where(x => Converter.Set(x)?.ToString() != chip.Value?.ToString());
1111+
if (chip == null || SelectedValues == null)
1112+
{
1113+
return;
1114+
}
1115+
//SelectedValues = SelectedValues.Where(x => Converter.Set(x)?.ToString() != chip.Value?.ToString());
1116+
SelectedValues = SelectedValues.Where(x => x.Equals(chip.Value) == false);
11121117
await SelectedValuesChanged.InvokeAsync(SelectedValues);
11131118
}
11141119
}

0 commit comments

Comments
 (0)