From 99eb98bb08c2a5a5c038630e5ee57f52589c0f71 Mon Sep 17 00:00:00 2001 From: Sandro Hanea Date: Fri, 15 May 2020 14:51:27 +0300 Subject: [PATCH 1/2] Fixed issues: https://github.com/SamProf/MatBlazor/issues/315 - clear button https://github.com/SamProf/MatBlazor/issues/430 https://github.com/SamProf/MatBlazor/issues/246 - partial https://github.com/SamProf/MatBlazor/issues/213 --- .../Demo/DemoAutocomplete.razor | 4 +- .../Demo/DemoAutocompleteList.razor | 98 ++++++++++++++----- .../BaseMatAutocompleteList.cs | 11 ++- .../MatAutocompleteList.razor | 16 ++- 4 files changed, 99 insertions(+), 30 deletions(-) diff --git a/src/MatBlazor.Demo/Demo/DemoAutocomplete.razor b/src/MatBlazor.Demo/Demo/DemoAutocomplete.razor index e4a6139e..3e040f60 100644 --- a/src/MatBlazor.Demo/Demo/DemoAutocomplete.razor +++ b/src/MatBlazor.Demo/Demo/DemoAutocomplete.razor @@ -7,7 +7,7 @@
Example
- + @code { @@ -26,7 +26,7 @@ + @code { diff --git a/src/MatBlazor.Demo/Demo/DemoAutocompleteList.razor b/src/MatBlazor.Demo/Demo/DemoAutocompleteList.razor index 9bc931f2..fe91cb19 100644 --- a/src/MatBlazor.Demo/Demo/DemoAutocompleteList.razor +++ b/src/MatBlazor.Demo/Demo/DemoAutocompleteList.razor @@ -20,7 +20,7 @@ - @code @@ -45,7 +45,7 @@ - ")> @@ -57,7 +57,7 @@ - ")> @@ -75,7 +75,7 @@ -

+

Selected value: @(value?.Name)

@@ -110,9 +110,9 @@ } - + - i.Name)"" @bind-Value=""@value""> @@ -162,20 +162,20 @@ -
With Full Width
- - - - -
-
@context.Name
-
@context.Price$
-
- - - - - With Full Width + + + + +
+
@context.Name
+
@context.Price$
+
+ + + + + i.Name)"">
@@ -185,5 +185,59 @@ ")> - - \ No newline at end of file + + + +
In an edit form with a Data Annotation Validator
+ + + + + + + Submit + + @code + { + class AutocompleteContextModel + { + public List Options { get; set; } = new List() { "A test option", "Another test option", "One more option" }; + + [System.ComponentModel.DataAnnotations.Required] + public string SelectedOption { get; set; } + } + AutocompleteContextModel model = new AutocompleteContextModel(); + + void HandleValidSubmit() + { + Console.WriteLine("On Valid Submit"); + } + } + + + + + + + Submit + + @code + { + class AutocompleteContextModel + { + public List Options { get; set; } = new List() { ""A test option"", ""Another test option"", ""One more option"" }; + + [System.ComponentModel.DataAnnotations.Required] + public string SelectedOption { get; set; } + } + AutocompleteContextModel model = new AutocompleteContextModel(); + + void HandleValidSubmit() + { + Console.WriteLine(""On Valid Submit""); + } + } + ")> + + diff --git a/src/MatBlazor/Components/MatAutocompleteList/BaseMatAutocompleteList.cs b/src/MatBlazor/Components/MatAutocompleteList/BaseMatAutocompleteList.cs index 8a701433..4f904a2b 100644 --- a/src/MatBlazor/Components/MatAutocompleteList/BaseMatAutocompleteList.cs +++ b/src/MatBlazor/Components/MatAutocompleteList/BaseMatAutocompleteList.cs @@ -90,10 +90,13 @@ public TItem Value get { return _value; } set { - var newerStringValue = EqualValues(value, default) ? string.Empty : ComputeStringValue(value); - if (newerStringValue != StringValue) + if (!EqualValues(value, default)) { - StringValue = newerStringValue; + var newValue = ComputeStringValue(value); + if (newValue != StringValue) + { + StringValue = newValue; + } } if (EqualValues(value, _value)) @@ -175,6 +178,7 @@ protected void ClosePopup() if (StringValue != ComputeStringValue(Value)) { _value = default; + ValueChanged.InvokeAsync(_value); } IsOpened = false; } @@ -190,7 +194,6 @@ public async void OnKeyDown(KeyboardEventArgs ev) if (ev.Key == "ArrowDown" || ev.Key == "ArrowUp") { int currentIndex = await ListRef.GetSelectedIndex(); - int nextIndex = (ev.Key == "ArrowDown") ? currentIndex++ : currentIndex--; await ListRef.SetSelectedIndex(currentIndex); } else if (ev.Key == "Enter") diff --git a/src/MatBlazor/Components/MatAutocompleteList/MatAutocompleteList.razor b/src/MatBlazor/Components/MatAutocompleteList/MatAutocompleteList.razor index eeacf4be..b571f480 100644 --- a/src/MatBlazor/Components/MatAutocompleteList/MatAutocompleteList.razor +++ b/src/MatBlazor/Components/MatAutocompleteList/MatAutocompleteList.razor @@ -5,11 +5,23 @@
- + @if (IsShowingClearButton) {
- +
} @if (Items != null && IsOpened) From 2df922a9169b174a8539530233e9b5f2fdd243f5 Mon Sep 17 00:00:00 2001 From: Sandro Hanea Date: Sat, 16 May 2020 13:32:19 +0300 Subject: [PATCH 2/2] Fixed an issue with selection with enter on WASM + added caching for list result. Fixed some comments from CR --- .../AutocompleteListSearchResult.cs | 11 ++++ .../BaseMatAutocompleteList.cs | 64 +++++++++++++++---- .../MatAutocompleteList.razor | 2 +- 3 files changed, 62 insertions(+), 15 deletions(-) create mode 100644 src/MatBlazor/Components/MatAutocompleteList/AutocompleteListSearchResult.cs diff --git a/src/MatBlazor/Components/MatAutocompleteList/AutocompleteListSearchResult.cs b/src/MatBlazor/Components/MatAutocompleteList/AutocompleteListSearchResult.cs new file mode 100644 index 00000000..af861eee --- /dev/null +++ b/src/MatBlazor/Components/MatAutocompleteList/AutocompleteListSearchResult.cs @@ -0,0 +1,11 @@ +using System.Collections.Generic; + +namespace MatBlazor.Components.MatAutocompleteList +{ + internal class AutocompleteListSearchResult + { + public List> ListResult { get; set; } + + public string SearchText { get; set; } + } +} diff --git a/src/MatBlazor/Components/MatAutocompleteList/BaseMatAutocompleteList.cs b/src/MatBlazor/Components/MatAutocompleteList/BaseMatAutocompleteList.cs index 4f904a2b..3b5d2ea3 100644 --- a/src/MatBlazor/Components/MatAutocompleteList/BaseMatAutocompleteList.cs +++ b/src/MatBlazor/Components/MatAutocompleteList/BaseMatAutocompleteList.cs @@ -2,6 +2,7 @@ using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; +using MatBlazor.Components.MatAutocompleteList; using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.Components.Web; @@ -17,20 +18,33 @@ public class BaseMatAutocompleteList : BaseMatDomComponent private bool isOpened; private string stringValue; private TItem _value; - + private AutocompleteListSearchResult searchResult; public MatList ListRef; protected IEnumerable> GetFilteredCollection(string searchText) { - return Items.Select(x => new MatAutocompleteListItem() + if (searchResult == null || searchResult.SearchText != searchText) { - StringValue = ComputeStringValue(x), - Item = x - }) - .Where(x => x != null && - (string.IsNullOrEmpty(searchText) || x.StringValue.ToLowerInvariant() - .Contains(searchText.ToLowerInvariant()))) - .Take(NumberOfElementsInPopup ?? DefaultsElementsInPopup); + searchResult = new AutocompleteListSearchResult() + { + SearchText = searchText, + ListResult = Items.Select(x => new MatAutocompleteListItem() + { + StringValue = ComputeStringValue(x), + Item = x + }) + .Where + ( + x => x != null + && (string.IsNullOrEmpty(searchText) + || x.StringValue.ToLowerInvariant().Contains(searchText.ToLowerInvariant()) + ) + ) + .Take(NumberOfElementsInPopup ?? DefaultsElementsInPopup) + .ToList() + }; + } + return searchResult.ListResult; } protected bool IsShowingClearButton @@ -191,18 +205,40 @@ public void OnValueChanged(ChangeEventArgs ev) public async void OnKeyDown(KeyboardEventArgs ev) { - if (ev.Key == "ArrowDown" || ev.Key == "ArrowUp") + var currentIndex = await ListRef.GetSelectedIndex(); + var wasCurrentIndexChanged = false; + if (currentIndex < 0) + { + currentIndex = 0; + wasCurrentIndexChanged = true; + } + if (searchResult != null && searchResult.ListResult.Count > 0 && currentIndex > searchResult.ListResult.Count) + { + currentIndex = searchResult.ListResult.Count - 1; + wasCurrentIndexChanged = true; + } + if (ev.Key == "ArrowDown") + { + currentIndex++; + wasCurrentIndexChanged = true; + } + if (ev.Key == "ArrowUp") + { + currentIndex--; + wasCurrentIndexChanged = true; + } + if (wasCurrentIndexChanged) { - int currentIndex = await ListRef.GetSelectedIndex(); await ListRef.SetSelectedIndex(currentIndex); } - else if (ev.Key == "Enter") + + if (ev.Key == "Enter" && searchResult != null && currentIndex >= 0 && currentIndex < searchResult.ListResult.Count) { - await JsInvokeAsync("matBlazor.matList.confirmSelection", ListRef.Ref); + ItemSelected(searchResult.ListResult[currentIndex].Item); } } - public void ItemClicked(TItem selectedObject) + public void ItemSelected(TItem selectedObject) { Value = selectedObject; StateHasChanged(); diff --git a/src/MatBlazor/Components/MatAutocompleteList/MatAutocompleteList.razor b/src/MatBlazor/Components/MatAutocompleteList/MatAutocompleteList.razor index b571f480..751140d5 100644 --- a/src/MatBlazor/Components/MatAutocompleteList/MatAutocompleteList.razor +++ b/src/MatBlazor/Components/MatAutocompleteList/MatAutocompleteList.razor @@ -30,7 +30,7 @@ @foreach (var elementWrapper in GetFilteredCollection(StringValue)) { - + @if (ItemTemplate != null) { @ItemTemplate(elementWrapper.Item)