Skip to content

Commit f375120

Browse files
mckaragozmckaragoz
authored
ComboBox Fixes (#217)
* Fix Keyboard Navigation * Customized Highlight * Fix Multiselection to Single Selection Selected Item's Style
1 parent 5c48464 commit f375120

29 files changed

Lines changed: 513 additions & 254 deletions

‎CodeBeam.MudBlazor.Extensions.UnitTests.Viewer/TestComponents/Combobox/ComboboxClearableTest.razor‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
@namespace MudExtensions.UnitTests.TestComponents
22
<MudPopoverProvider></MudPopoverProvider>
33

4-
<MudCombobox @bind-Value="value" Clearable="true" OnClearButtonClick="@ClearButtonClickHandler">
5-
<MudComboboxItem Value="@("1")" />
6-
<MudComboboxItem Value="@("2")" />
7-
<MudComboboxItem Value="@("3")" />
8-
</MudCombobox>
4+
<MudComboBox @bind-Value="value" Clearable="true" OnClearButtonClick="@ClearButtonClickHandler">
5+
<MudComboBoxItem Value="@("1")" />
6+
<MudComboBoxItem Value="@("2")" />
7+
<MudComboBoxItem Value="@("3")" />
8+
</MudComboBox>
99

1010
@code {
1111

‎CodeBeam.MudBlazor.Extensions.UnitTests.Viewer/TestComponents/Combobox/ComboboxEventCountTest.razor‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
@namespace MudExtensions.UnitTests.TestComponents
22

33
<MudPopoverProvider></MudPopoverProvider>
4-
<MudCombobox @ref="_combobox" T="string" ValueChanged="ValueChanged" SelectedValuesChanged="ValuesChanged" MultiSelection="MultiSelection">
5-
<MudComboboxItem @ref="FirstItem" T="string" Value="@("1")" />
6-
<MudComboboxItem @ref="SecondItem" T="string" Value="@("2")" />
7-
<MudComboboxItem @ref="ThirdItem" T="string" Value="@("3")" />
8-
<MudComboboxItem T="string" Value="@("4")" Disabled="true" />
9-
</MudCombobox>
4+
<MudComboBox @ref="_combobox" T="string" ValueChanged="ValueChanged" SelectedValuesChanged="ValuesChanged" MultiSelection="MultiSelection">
5+
<MudComboBoxItem @ref="FirstItem" T="string" Value="@("1")" />
6+
<MudComboBoxItem @ref="SecondItem" T="string" Value="@("2")" />
7+
<MudComboBoxItem @ref="ThirdItem" T="string" Value="@("3")" />
8+
<MudComboBoxItem T="string" Value="@("4")" Disabled="true" />
9+
</MudComboBox>
1010

1111
@code {
1212
[Parameter]
@@ -17,10 +17,10 @@
1717
public int ItemChangeCount { get; set; }
1818
public int ItemsChangeCount { get; set; }
1919

20-
MudCombobox<string> _combobox;
21-
MudComboboxItem<string> FirstItem { get; set; }
22-
MudComboboxItem<string> SecondItem { get; set; }
23-
MudComboboxItem<string> ThirdItem { get; set; }
20+
MudComboBox<string> _combobox;
21+
MudComboBoxItem<string> FirstItem { get; set; }
22+
MudComboBoxItem<string> SecondItem { get; set; }
23+
MudComboBoxItem<string> ThirdItem { get; set; }
2424

2525
//public void SetSelectedItem()
2626
//{

‎CodeBeam.MudBlazor.Extensions.UnitTests.Viewer/TestComponents/Combobox/ComboboxInitialValueTest.razor‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
@namespace MudExtensions.UnitTests.TestComponents
22
<MudPopoverProvider></MudPopoverProvider>
33

4-
<MudCombobox @bind-Value="SelectedValue" @bind-SelectedValues="SelectedValues" MultiSelection="MultiSelection">
5-
<MudComboboxItem Value="@("1")"/>
6-
<MudComboboxItem Value="@("2")"/>
7-
<MudComboboxItem Value="@("3")"/>
8-
<MudComboboxItem Value="@("4")" Disabled="true"/>
9-
</MudCombobox>
4+
<MudComboBox @bind-Value="SelectedValue" @bind-SelectedValues="SelectedValues" MultiSelection="MultiSelection">
5+
<MudComboBoxItem Value="@("1")"/>
6+
<MudComboBoxItem Value="@("2")"/>
7+
<MudComboBoxItem Value="@("3")"/>
8+
<MudComboBoxItem Value="@("4")" Disabled="true"/>
9+
</MudComboBox>
1010

1111
@code {
1212
[Parameter]

‎CodeBeam.MudBlazor.Extensions.UnitTests.Viewer/TestComponents/Combobox/ComboboxMultiSelectTest1.razor‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
@namespace MudExtensions.UnitTests.TestComponents
22
<MudPopoverProvider></MudPopoverProvider>
33

4-
<MudCombobox @bind-SelectedValues="values" MultiSelection="true">
5-
<MudComboboxItem Value="@("1")">1</MudComboboxItem>
6-
<MudComboboxItem Value="@("2")">2</MudComboboxItem>
7-
<MudComboboxItem Value="@("3")">3</MudComboboxItem>
8-
</MudCombobox>
4+
<MudComboBox @bind-SelectedValues="values" MultiSelection="true">
5+
<MudComboBoxItem Value="@("1")">1</MudComboBoxItem>
6+
<MudComboBoxItem Value="@("2")">2</MudComboBoxItem>
7+
<MudComboBoxItem Value="@("3")">3</MudComboBoxItem>
8+
</MudComboBox>
99

1010

1111
@code {

‎CodeBeam.MudBlazor.Extensions.UnitTests.Viewer/TestComponents/Combobox/ComboboxMultiSelectTest2.razor‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@namespace MudExtensions.UnitTests.TestComponents
22
<MudPopoverProvider></MudPopoverProvider>
33

4-
<MudCombobox Label="Select Item"
4+
<MudComboBox Label="Select Item"
55
MultiSelection="true"
66
T="string"
77
Delimiter="^"
@@ -10,9 +10,9 @@
1010

1111
@foreach (var item in AllItems)
1212
{
13-
<MudComboboxItem T="string" Value="@item">@item</MudComboboxItem>
13+
<MudComboBoxItem T="string" Value="@item">@item</MudComboBoxItem>
1414
}
15-
</MudCombobox>
15+
</MudComboBox>
1616

1717
@code {
1818
public static string __description__ = "Test for the Select All option";

‎CodeBeam.MudBlazor.Extensions.UnitTests.Viewer/TestComponents/Combobox/ComboboxMultiSelectTest3.razor‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
@namespace MudExtensions.UnitTests.TestComponents
2+
<MudPopoverProvider></MudPopoverProvider>
3+
4+
<MudGrid>
5+
<MudItem xs="12" md="6">
6+
<MudText Typo="Typo.body2">MudSelect.Value: "@value"</MudText>
7+
<MudText Typo="Typo.body2">Selected Values: "@string.Join(", ", options ?? new List<string>())"</MudText>
8+
</MudItem>
9+
<MudItem xs="12" md="12">
10+
<MudComboBox T="string" @bind-Value="value" @bind-SelectedValues="options" Label="Felines" HelperText="Pick your favorite feline"
11+
MultiSelection="true" SelectAll="true" SelectAllText="Select all felines"
12+
MultiSelectionTextFunc="@(new Func<List<string>, string>(GetMultiSelectionText))">
13+
@foreach (var feline in felines)
14+
{
15+
<MudComboBoxItem T="string" Value="@feline">@feline</MudComboBoxItem>
16+
}
17+
</MudComboBox>
18+
</MudItem>
19+
</MudGrid>
20+
21+
@code {
22+
private string value { get; set; } = "Nothing selected";
23+
private IEnumerable<string> options { get; set; } = new HashSet<string>() { "Lion" };
24+
25+
private string[] felines =
26+
{
27+
"Jaguar", "Leopard", "Lion", "Lynx", "Panther", "Puma", "Tiger"
28+
};
29+
30+
private string GetMultiSelectionText(List<string> selectedValues)
31+
{
32+
return $"{selectedValues.Count} feline{(selectedValues.Count > 1 ? "s have" : " has")} been selected";
33+
}
34+
}

‎CodeBeam.MudBlazor.Extensions.UnitTests.Viewer/TestComponents/Combobox/ComboboxTest1.razor‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
@namespace MudExtensions.UnitTests.TestComponents
22
<MudPopoverProvider></MudPopoverProvider>
33

4-
<MudCombobox T="string" @bind-Value="value" PopoverClass="combobox-popover-class" @onfocus="Focused" OnBlur="Blurred">
5-
<MudComboboxItem Value="@("1")"/>
6-
<MudComboboxItem Value="@("2")"/>
7-
<MudComboboxItem Value="@("3")"/>
8-
<MudComboboxItem Value="@("4")" Disabled="true"/>
9-
</MudCombobox>
4+
<MudComboBox T="string" @bind-Value="value" PopoverClass="combobox-popover-class" @onfocus="Focused" OnBlur="Blurred">
5+
<MudComboBoxItem Value="@("1")"/>
6+
<MudComboBoxItem Value="@("2")"/>
7+
<MudComboBoxItem Value="@("3")"/>
8+
<MudComboBoxItem Value="@("4")" Disabled="true"/>
9+
</MudComboBox>
1010

1111
<MudSwitch @bind-Checked="@_focused" />
1212

0 commit comments

Comments
 (0)