feat: Add FocusAsync methods to FluentInputBase (#191)

# Pull Request

## 📖 Description
Add FocusAsync methods to FluentInputBase and give examples in the TextField, NumberField and TextArea pages.

This PR exposes the ElementReference.FocusAsync() methods of the underlying element encapsulated by the FluentInputBase derived components. This makes it easier to programmatically set the focus on text based input fields.

<!---
Provide some background and a description of your work.
What problem does this change solve?
Is this a breaking change, chore, fix, feature, etc?
-->

### 🎫 Issues
closes #157 

<!---
* List and link relevant issues here.
-->

## 👩‍💻 Reviewer Notes

<!---
Provide some notes for reviewers to help them provide targeted feedback and testing.

Do you recommend a smoke test for this PR? What steps should be followed?
Are there particular areas of the code the reviewer should focus on?
-->

## 📑 Test Plan

<!---
Please provide a summary of the tests affected by this work and any unique strategies employed in testing the features/fixes.
-->

## ✅ Checklist

### General

<!--- Review the list and put an x in the boxes that apply. -->

- [x] I have added tests for my changes.
- [x] I have tested my changes.
- [ ] I have updated the project documentation to reflect my changes.
- [x] I have read the [CONTRIBUTING](https://github.com/Microsoft/fast-blazor/blob/master/CONTRIBUTING.md) documentation and followed the [standards](https://www.fast.design/docs/community/code-of-conduct/#our-standards) for this project.

### Component-specific

<!--- Review the list and put an x in the boxes that apply. -->
<!--- Remove this section if not applicable. -->

- [ ] I have added a new component
- [x] I have modified an existing component

## ⏭ Next Steps

<!---
If there is relevant follow-up work to this PR, please list any existing issues or provide brief descriptions of what you would like to do next.
-->

Author: williamw2

examples/FluentUI.Demo.Shared/Pages/NumberFieldPage.razor

@@ -126,7 +126,13 @@
 <h4>With aria-label</h4>
 <FluentNumberField TValue="int?" aria-label="Text field with aria-label"></FluentNumberField>
 
+<!-- Focus Async -->
+<h4>Focus Async</h4>
+<FluentButton @onclick="() => focusTest!.FocusAsync()">FocusAsync</FluentButton> 
+<FluentTextField @ref=focusTest></FluentTextField>
+
 @code{
+    FluentTextField? focusTest;
     int exampleInt { get; set; } = 123;
     long exampleLong { get; set; } = 999999999999;
     float exampleFloat { get; set; } = 123.45f;

examples/FluentUI.Demo.Shared/Pages/TextAreaPage.razor

@@ -89,4 +89,12 @@
 
 <!-- With aria label -->
 <h4>With aria-label</h4>
-<FluentTextArea aria-label="Text area with aria-label"></FluentTextArea>
+<FluentTextArea aria-label="Text area with aria-label"></FluentTextArea>
+
+<!-- Focus Async -->
+<h4>Focus Async</h4>
+<FluentButton @onclick="() => focusTest!.FocusAsync()">FocusAsync</FluentButton> 
+<FluentTextArea @ref=focusTest></FluentTextArea>
+@code {
+    FluentTextArea? focusTest;
+}

examples/FluentUI.Demo.Shared/Pages/TextFieldPage.razor

@@ -100,4 +100,12 @@
 <FluentTextField MinLength="4">Minlength</FluentTextField>
 
 <h4>Maxlength</h4>
-<FluentTextField MaxLength="4">Maxlength</FluentTextField>
+<FluentTextField MaxLength="4">Maxlength</FluentTextField>
+
+<!-- Focus Async -->
+<h4>Focus Async</h4>
+<FluentButton @onclick="() => focusTest!.FocusAsync()">FocusAsync</FluentButton> 
+<FluentTextField @ref=focusTest></FluentTextField>
+@code {
+    FluentTextField? focusTest;
+}

src/Microsoft.Fast.Components.FluentUI/FluentInputBase.cs

@@ -201,6 +201,26 @@ public override Task SetParametersAsync(ParameterView parameters)
         return base.SetParametersAsync(ParameterView.Empty);
     }
 
+    /// <summary>
+    /// Exposes the element's FocusAsync() method.
+    /// </summary>
+    public async void FocusAsync()
+    {
+        await Element!.FocusAsync();
+    }
+
+    /// <summary>
+    /// Exposes the elements FocusAsync(bool preventScroll) method.
+    /// </summary>
+    /// <param name="preventScroll">A Boolean value indicating whether or not the browser should scroll 
+    /// the document to bring the newly-focused element into view. A value of false for preventScroll (the default) 
+    /// means that the browser will scroll the element into view after focusing it. 
+    /// If preventScroll is set to true, no scrolling will occur.</param>
+    public async void FocusAsync(bool preventScroll)
+    {
+        await Element!.FocusAsync(preventScroll);
+    }
+
     private void OnValidateStateChanged(object? sender, ValidationStateChangedEventArgs eventArgs)
     {
         UpdateAdditionalValidationAttributes();