From fdcd35ba39d67894f9d5219fea338afb0a93dd6a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotr=20B=C5=82a=C5=BCejewicz=20=28Peter=20Blazejewicz=29?=
 <peterblazejewicz@users.noreply.github.com>
Date: Tue, 29 Oct 2019 23:19:36 +0100
Subject: [PATCH] Expose OnFocus event on MatButton. Closes #314

- implementation change
- example code update

Thanks!
---
 src/MatBlazor.Demo/Demo/DemoMatButton.razor       | 14 ++++++++++++--
 src/MatBlazor.Demo/Doc/DocMatButton.razor         |  5 +++++
 .../Components/MatButton/BaseMatButton.cs         | 15 +++++++++++++++
 .../Components/MatButton/MatButton.razor          |  2 +-
 src/MatBlazor/MatBlazor.xml                       | 11 +++++++++++
 5 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/src/MatBlazor.Demo/Demo/DemoMatButton.razor b/src/MatBlazor.Demo/Demo/DemoMatButton.razor
index fe42e508..e7e87527 100644
--- a/src/MatBlazor.Demo/Demo/DemoMatButton.razor
+++ b/src/MatBlazor.Demo/Demo/DemoMatButton.razor
@@ -9,7 +9,7 @@
         @using Microsoft.AspNetCore.Components
 
         <h4 class="mat-subtitle1">Simple use</h4>
-        <MatButton Icon="favorite" OnClick="@RunOnClick" Label="Simple Button"></MatButton>
+        <MatButton Icon="favorite" OnClick="@RunOnClick" Label="Simple Button" OnFocus="@RunOnFocus"></MatButton>
 
         <h5 class="mat-subtitle1">With Font-Awsome Icons and Link</h5>
         <MatButton Link="https://github.com/BlazorComponents/MatBlazor">
@@ -24,6 +24,11 @@
                 JsRuntime.InvokeAsync<object>("window.alert", "Test");
             }
 
+            public void RunOnFocus(FocusEventArgs e)
+            {
+                Console.WriteLine(e.Type);
+            }
+
         }
 
     </Content>
@@ -32,7 +37,7 @@
         @using Microsoft.AspNetCore.Components
 
         <h4 class=""mat-subtitle1"">Simple use</h4>
-        <MatButton Icon=""favorite"" OnClick=""@RunOnClick"" Label=""Simple Button""></MatButton>
+        <MatButton Icon=""favorite"" OnClick=""@RunOnClick"" OnFocus=""@RunOnFocus"" Label=""Simple Button""></MatButton>
 
         <h5 class=""mat-subtitle1"">With Font-Awsome Icons and Link</h5>
         <MatButton Link=""https://github.com/BlazorComponents/MatBlazor"">
@@ -47,6 +52,11 @@
                 JsRuntime.InvokeAsync<object>(""window.alert"", ""Test"");
             }
 
+            public void RunOnFocus(FocusEventArgs e)
+            {
+                Console.WriteLine(e.Type);
+            }
+
         }
 
     ")></BlazorFiddle>
diff --git a/src/MatBlazor.Demo/Doc/DocMatButton.razor b/src/MatBlazor.Demo/Doc/DocMatButton.razor
index a5d7aa04..8fbe5b8d 100644
--- a/src/MatBlazor.Demo/Doc/DocMatButton.razor
+++ b/src/MatBlazor.Demo/Doc/DocMatButton.razor
@@ -79,6 +79,11 @@
 		<td>EventCallback&lt;MouseEventArgs&gt;</td>
 		<td>Event occurs when the user clicks on an element.</td>
 	</tr>
+     <tr>
+         <td>OnFocus</td>
+         <td>EventCallback&lt;FocusEventArgs&gt;</td>
+         <td>Event occurs when the user focuses on an element.</td>
+     </tr>
 	<tr>
 		<td>OnClickStopPropagation</td>
 		<td>Boolean</td>
diff --git a/src/MatBlazor/Components/MatButton/BaseMatButton.cs b/src/MatBlazor/Components/MatButton/BaseMatButton.cs
index df45f3a2..d4aa16da 100644
--- a/src/MatBlazor/Components/MatButton/BaseMatButton.cs
+++ b/src/MatBlazor/Components/MatButton/BaseMatButton.cs
@@ -43,6 +43,12 @@ public BaseMatButton()
         [Parameter]
         public bool OnClickStopPropagation { get; set; }
 
+        /// <summary>        
+        /// Event occurs when the user focuses on an element
+        /// </summary>
+        [Parameter]
+        public EventCallback<FocusEventArgs> OnFocus { get; set; }
+
         /// <summary>
         ///  Command executed when the user clicks on an element.
         /// </summary>
@@ -197,6 +203,15 @@ protected void OnClickHandler(MouseEventArgs ev)
             }
         }
 
+        /// <summary>
+        /// Event handler for focus event
+        /// </summary>
+        /// <param name="ev"></param>
+        protected void OnFocusHandler(FocusEventArgs ev)
+        {
+            OnFocus.InvokeAsync(ev);
+        }
+
         private bool _raised;
         private bool _unelevated;
         private bool _outlined;
diff --git a/src/MatBlazor/Components/MatButton/MatButton.razor b/src/MatBlazor/Components/MatButton/MatButton.razor
index ee86a4f7..0955e1f0 100644
--- a/src/MatBlazor/Components/MatButton/MatButton.razor
+++ b/src/MatBlazor/Components/MatButton/MatButton.razor
@@ -1,7 +1,7 @@
 @namespace MatBlazor
 @inherits BaseMatButton
 
-<button class="@ClassMapper.AsString()" style="@StyleMapper.AsString()" @onclick="OnClickHandler" @onclick:stopPropagation=@OnClickStopPropagation disabled=@Disabled aria-label="@(Label ?? Icon)" @ref="Ref" type="@Type" name="@Name" value="@Value" @attributes="Attributes" Id="@Id">
+<button class="@ClassMapper.AsString()" style="@StyleMapper.AsString()" @onclick="OnClickHandler" @onclick:stopPropagation=@OnClickStopPropagation @onfocus="OnFocusHandler" disabled=@Disabled aria-label="@(Label ?? Icon)" @ref="Ref" type="@Type" name="@Name" value="@Value" @attributes="Attributes" Id="@Id">
     <div class="mdc-button__ripple"></div>
     @if (Icon != null)
     {
diff --git a/src/MatBlazor/MatBlazor.xml b/src/MatBlazor/MatBlazor.xml
index 67ee1d88..8cb7eb28 100644
--- a/src/MatBlazor/MatBlazor.xml
+++ b/src/MatBlazor/MatBlazor.xml
@@ -221,6 +221,11 @@
             Stop propagation of the OnClick event
             </summary>
         </member>
+        <member name="P:MatBlazor.BaseMatButton.OnFocus">
+            <summary>
+            Event occurs when the user focuses on an element
+            </summary>
+        </member>
         <member name="P:MatBlazor.BaseMatButton.Command">
             <summary>
              Command executed when the user clicks on an element.
@@ -281,6 +286,12 @@
             Inline label of Button.
             </summary>
         </member>
+        <member name="M:MatBlazor.BaseMatButton.OnFocusHandler(Microsoft.AspNetCore.Components.Web.FocusEventArgs)">
+            <summary>
+            Event handler for focus event
+            </summary>
+            <param name="ev"></param>
+        </member>
         <member name="T:MatBlazor.BaseMatCard">
             <summary>
             Card component for Blazor contain content and actions about a single subject.