Skip to content

Commit

Permalink
Fixed issues:
Browse files Browse the repository at this point in the history 
SamProf#315 - clear button
SamProf#430
SamProf#246 - partial
SamProf#213
  • Loading branch information
@sandrohanea
sandrohanea committed May 15, 2020
1 parent eb20a3b commit 99eb98b
Show file tree
Hide file tree
Showing 4 changed files with 99 additions and 30 deletions.
4 changes: 2 additions & 2 deletions src/MatBlazor.Demo/Demo/DemoAutocomplete.razor
View file
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
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: 7 additions & 4 deletions src/MatBlazor/Components/MatAutocompleteList/BaseMatAutocompleteList.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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))
Expand Down Expand Up @@ -175,6 +178,7 @@ protected void ClosePopup()
if (StringValue != ComputeStringValue(Value))
{
_value = default;
ValueChanged.InvokeAsync(_value);
}
IsOpened = false;
}
Expand All @@ -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")
Expand Down
16 changes: 14 additions & 2 deletions src/MatBlazor/Components/MatAutocompleteList/MatAutocompleteList.razor
View file
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" OnMouseDown="@ClearText"></MatIconButton>
<MatIconButton Icon="clear" type="button" OnMouseDown="@ClearText"></MatIconButton>
</div>
}
@if (Items != null && IsOpened)
Expand Down

0 comments on commit 99eb98b

Please sign in to comment.