Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixed multiple Autocomplete Issues #548

Merged
merged 3 commits into from
May 16, 2020
Merged

Fixed multiple Autocomplete Issues #548

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
99eb98b
Fixed issues:
sandrohanea May 15, 2020
2df922a
Fixed an issue with selection with enter on WASM + added caching for …
sandrohanea May 16, 2020
c136e7e
Merged branch develop to fix some conflicts.
sandrohanea May 16, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/MatBlazor.Demo/Demo/DemoAutocomplete.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<h5 class="mat-h5">Example</h5>
<DemoContainer>
<Content>
<MatAutocompleteKey Items="@options" Label="Pick one" @bind-Value="@value"></MatAutocompleteKey>
<MatAutocomplete Items="@options" Label="Pick one" @bind-Value="@value"></MatAutocomplete>

@code
{
Expand All @@ -26,7 +26,7 @@
</Content>
<SourceContent>
<BlazorFiddle Template="MatBlazor" Code=@(@"
<MatAutocompleteKey Items=""@options"" Label=""Pick one"" @bind-Value=""@value""></MatAutocompleteKey>
<MatAutocomplete Items=""@options"" Label=""Pick one"" @bind-Value=""@value""></MatAutocompleteKey>

@code
{
Expand Down
98 changes: 76 additions & 22 deletions src/MatBlazor.Demo/Demo/DemoAutocompleteList.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@

</Content>
<SourceContent>
<BlazorFiddle Template="MatBlazor" Code=@(@"
<BlazorFiddle Template="MatBlazor" Code=@(@"
<MatAutocompleteList Items=""@options"" TItem=""string"" Label=""Pick one""></MatAutocompleteList>

@code
Expand All @@ -45,7 +45,7 @@
<MatAutocompleteList Items="@options" Icon="thumb_up_alt" TItem="string" Label="Pick one"></MatAutocompleteList>
</Content>
<SourceContent>
<BlazorFiddle Template="MatBlazor" Code=@(@"
<BlazorFiddle Template="MatBlazor" Code=@(@"
<MatAutocompleteList Items=""@options"" Icon=""thumb_up_alt"" TItem=""string"" Label=""Pick one""></MatAutocompleteList>
")></BlazorFiddle>
</SourceContent>
Expand All @@ -57,7 +57,7 @@
<MatAutocompleteList Items="@options" Value="@options[0]" ShowClearButton="true" Icon="thumb_up_alt" TItem="string" Label="Pick one"></MatAutocompleteList>
</Content>
<SourceContent>
<BlazorFiddle Template="MatBlazor" Code=@(@"
<BlazorFiddle Template="MatBlazor" Code=@(@"
<MatAutocompleteList Items=""@options"" Value=""@options[0]"" ShowClearButton=""true"" Icon=""thumb_up_alt"" TItem=""string"" Label=""Pick one""></MatAutocompleteList>
")></BlazorFiddle>
</SourceContent>
Expand All @@ -75,7 +75,7 @@
</div>
</ItemTemplate>
</MatAutocompleteList>
</p>
</p>
<p>
Selected value: @(value?.Name)
</p>
Expand Down Expand Up @@ -110,9 +110,9 @@

}

</Content>
</Content>
<SourceContent>
<BlazorFiddle Template="MatBlazor" Code=@(@"
<BlazorFiddle Template="MatBlazor" Code=@(@"
<p>
<MatAutocompleteList Items=""@options2"" TItem=""Car"" Label=""Select car"" CustomStringSelector=""@(i => i.Name)"" @bind-Value=""@value"">
<ItemTemplate>
Expand Down Expand Up @@ -162,20 +162,20 @@
</DemoContainer>


<h5 class="mat-h5">With Full Width</h5>
<DemoContainer>
<Content>
<MatAutocompleteList Items="@options2" FullWidth="true" TItem="Car" Label="Select car" CustomStringSelector="@(i => i.Name)">
<ItemTemplate>
<div style="display: flex; flex-direction: row; width: 100%;">
<div style="flex: 1;">@context.Name</div>
<div style="width: 150px;">@context.Price$</div>
</div>
</ItemTemplate>
</MatAutocompleteList>
</Content>
<SourceContent>
<BlazorFiddle Template="MatBlazor" Code=@(@"
<h5 class="mat-h5">With Full Width</h5>
<DemoContainer>
<Content>
<MatAutocompleteList Items="@options2" FullWidth="true" TItem="Car" Label="Select car" CustomStringSelector="@(i => i.Name)">
<ItemTemplate>
<div style="display: flex; flex-direction: row; width: 100%;">
<div style="flex: 1;">@context.Name</div>
<div style="width: 150px;">@context.Price$</div>
</div>
</ItemTemplate>
</MatAutocompleteList>
</Content>
<SourceContent>
<BlazorFiddle Template="MatBlazor" Code=@(@"
<MatAutocompleteList Items=""@options2"" FullWidth=""true"" TItem=""Car"" Label=""Select car"" CustomStringSelector=""@(i => i.Name)"">
<ItemTemplate>
<div style=""display: flex; flex-direction: row; width: 100%;"">
Expand All @@ -185,5 +185,59 @@
</ItemTemplate>
</MatAutocompleteList>
")></BlazorFiddle>
</SourceContent>
</DemoContainer>
</SourceContent>
</DemoContainer>

<h5 class="mat-h5">In an edit form with a Data Annotation Validator</h5>
<DemoContainer>
<Content>
<EditForm Model="@model" OnValidSubmit="HandleValidSubmit">
<DataAnnotationsValidator />
<ValidationSummary />
<MatAutocompleteList Items="@model.Options" Icon="thumb_up_alt" TItem="string" @bind-Value="@model.SelectedOption" Label="Pick one(Required)" ShowClearButton="true"></MatAutocompleteList>
<MatButton>Submit</MatButton>
</EditForm>
@code
{
class AutocompleteContextModel
{
public List<string> Options { get; set; } = new List<string>() { "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");
}
}
</Content>
<SourceContent>
<BlazorFiddle Template="MatBlazor" Code=@(@"
<EditForm Model=""@model"" OnValidSubmit=""HandleValidSubmit"">
<DataAnnotationsValidator />
<ValidationSummary />
<MatAutocompleteList Items=""@model.Options"" Icon=""thumb_up_alt"" TItem=""string"" @bind-Value=""@model.SelectedOption"" Label=""Pick one(Required)"" ShowClearButton=""true""></MatAutocompleteList>
<MatButton>Submit</MatButton>
</EditForm>
@code
{
class AutocompleteContextModel
{
public List<string> Options { get; set; } = new List<string>() { ""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"");
}
}
")></BlazorFiddle>
</SourceContent>
</DemoContainer>
11 changes: 11 additions & 0 deletions src/MatBlazor/Components/MatAutocompleteList/AutocompleteListSearchResult.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
using System.Collections.Generic;

namespace MatBlazor.Components.MatAutocompleteList
{
internal class AutocompleteListSearchResult<TItem>
{
public List<MatAutocompleteListItem<TItem>> ListResult { get; set; }

public string SearchText { get; set; }
}
}
75 changes: 57 additions & 18 deletions src/MatBlazor/Components/MatAutocompleteList/BaseMatAutocompleteList.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -17,20 +18,33 @@ public class BaseMatAutocompleteList<TItem> : BaseMatDomComponent
private bool isOpened;
private string stringValue;
private TItem _value;

private AutocompleteListSearchResult<TItem> searchResult;
public MatList ListRef;

protected IEnumerable<MatAutocompleteListItem<TItem>> GetFilteredCollection(string searchText)
{
return Items.Select(x => new MatAutocompleteListItem<TItem>()
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<TItem>()
{
SearchText = searchText,
ListResult = Items.Select(x => new MatAutocompleteListItem<TItem>()
{
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
Expand Down Expand Up @@ -90,10 +104,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))
Expand Down Expand Up @@ -175,6 +192,7 @@ protected void ClosePopup()
if (StringValue != ComputeStringValue(Value))
{
_value = default;
ValueChanged.InvokeAsync(_value);
}
IsOpened = false;
}
Expand All @@ -187,19 +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();
int nextIndex = (ev.Key == "ArrowDown") ? currentIndex++ : currentIndex--;
sandrohanea marked this conversation as resolved.
Show resolved Hide resolved
await ListRef.SetSelectedIndex(currentIndex);
}
else if (ev.Key == "Enter")

if (ev.Key == "Enter" && searchResult != null && currentIndex >= 0 && currentIndex < searchResult.ListResult.Count)
{
await JsInvokeAsync<object>("matBlazor.matList.confirmSelection", ListRef.Ref);
ItemSelected(searchResult.ListResult[currentIndex].Item);
}
}

public void ItemClicked(TItem selectedObject)
public void ItemSelected(TItem selectedObject)
{
Value = selectedObject;
StateHasChanged();
Expand Down
18 changes: 15 additions & 3 deletions src/MatBlazor/Components/MatAutocompleteList/MatAutocompleteList.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,23 @@


<div class="@WrapperClassMapper.AsString()">
<MatTextField Icon="@Icon" OnFocus="@OpenPopup" HideClearButton="true" FullWidth="@FullWidth" OnFocusOut="@ClosePopup" Label="@Label" Value=@StringValue OnInput=@OnValueChanged OnKeyDown="@OnKeyDown" Outlined="@Outlined" Attributes="@Attributes" Id="@Id"></MatTextField>
<MatTextField Icon="@Icon"
OnFocus="@OpenPopup"
HideClearButton="true"
FullWidth="@FullWidth"
OnFocusOut="@ClosePopup"
Label="@Label"
Value=@StringValue
ValueExpression="() => StringValue"
OnInput=@OnValueChanged
OnKeyDown="@OnKeyDown"
Outlined="@Outlined"
Attributes="@Attributes"
Id="@Id"></MatTextField>
@if (IsShowingClearButton)
{
<div class="mat-autocomplete-list-clearbutton">
<MatIconButton Icon="clear" OnClick="@ClearText"></MatIconButton>
<MatIconButton Icon="clear" type="button" OnClick="@ClearText"></MatIconButton>
</div>
}
@if (Items != null && IsOpened)
Expand All @@ -18,7 +30,7 @@
<MatList @ref="ListRef" SingleSelection="true">
@foreach (var elementWrapper in GetFilteredCollection(StringValue))
{
<MatListItem OnMouseDown="@((e) => ItemClicked(elementWrapper.Item))">
<MatListItem OnMouseDown="@((e) => ItemSelected(elementWrapper.Item))">
@if (ItemTemplate != null)
{
@ItemTemplate(elementWrapper.Item)
Expand Down