From 99eb98bb08c2a5a5c038630e5ee57f52589c0f71 Mon Sep 17 00:00:00 2001
From: Sandro Hanea <sandro@shane.ro>
Date: Fri, 15 May 2020 14:51:27 +0300
Subject: [PATCH] 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 @@
 <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
         {
@@ -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
         {
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 @@
 
     </Content>
     <SourceContent>
-    	<BlazorFiddle Template="MatBlazor" Code=@(@"
+        <BlazorFiddle Template="MatBlazor" Code=@(@"
         <MatAutocompleteList Items=""@options"" TItem=""string"" Label=""Pick one""></MatAutocompleteList>
 
         @code
@@ -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>
@@ -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>
@@ -75,7 +75,7 @@
                     </div>
                 </ItemTemplate>
             </MatAutocompleteList>
-         </p>
+        </p>
         <p>
             Selected value: @(value?.Name)
         </p>
@@ -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>
@@ -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%;"">
@@ -185,5 +185,59 @@
                 </ItemTemplate>
             </MatAutocompleteList>
         ")></BlazorFiddle>
-        </SourceContent>
-</DemoContainer>
\ No newline at end of file
+    </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>
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 @@
 
 
 <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)