Set focus to input after Scrub

menees · Oct 24, 2023 · baca1f5 · baca1f5
1 parent eb84585
commit baca1f5
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/src/Menees.Chords.Web/Index.razor b/src/Menees.Chords.Web/Index.razor
@@ -12,7 +12,7 @@
                         <option value="General">General</option>
                         <option value="ChordPro">ChordPro</option>
                     </select>
-                    <button class="btn btn-secondary text-nowrap" @onclick="CleanInput">
+                    <button class="btn btn-secondary text-nowrap" @onclick="CleanInputAsync">
                         <i class="oi oi-minus"></i> Scrub
                     </button>                    <button class="btn btn-primary text-nowrap" @onclick="ConvertInput">
                         <i class="oi oi-share"></i> Convert
@@ -26,7 +26,7 @@
             <div class="row">
                 <div class="col">
                     <textarea @bind="@Input" @bind:event=@InputChangeEvent spellcheck="false" wrap="hard"
-                              class="form-control font-monospace mono-font w-100 h-most"></textarea>
+                              class="form-control font-monospace mono-font w-100 h-most" @ref="inputElement"></textarea>
                 </div>
             </div>
         </div>

diff --git a/src/Menees.Chords.Web/Index.razor.cs b/src/Menees.Chords.Web/Index.razor.cs
@@ -25,6 +25,7 @@ public sealed partial class Index : IDisposable
 	private bool whenTyping = true;
 	private CopyState copyState = new("Copy", "oi oi-clipboard", "btn-secondary");
 	private string? title;
+	private ElementReference? inputElement;
 
 	#endregion
 
@@ -213,18 +214,22 @@ private async Task CopyToClipboardAsync()
 		}
 	}
 
-	private async void DownloadAsync()
+	private async Task DownloadAsync()
 	{
 		// https://www.meziantou.net/generating-and-downloading-a-file-in-a-blazor-webassembly-application.htm
 		byte[] fileBytes = System.Text.Encoding.UTF8.GetBytes(this.output);
 		string fileName = string.IsNullOrEmpty(this.title) ? $"{this.toType}.cho" : $"{this.title}.cho";
 		await this.JavaScript.InvokeVoidAsync("BlazorDownloadFile", fileName, "text/plain", fileBytes);
 	}
 
-	private void CleanInput()
+	private async Task CleanInputAsync()
 	{
 		Cleaner cleaner = new(this.Input);
 		this.Input = cleaner.CleanText;
+		if (this.inputElement != null)
+		{
+			await this.inputElement.Value.FocusAsync();
+		}
 	}
 
 	#endregion