[FluentKeyCodeProvider] Add a global service to capture keystrokes

[dvoituron]

Add a global service to capture keystrokes

Section

In some circumstances, Blazor does not retrieve all the KeyDown information received from JavaScript. FluentKeyCode retrieves this data, in a similar way to the JavaScript KeyCode library and to this demo sample.

The FluentKeyCode component extends the functionality of OnKeyDown by adding the KeyCode property when the OnKeyDown event is raised.

👉 Global

You can also capture keystrokes globally on the current page. To do this, we provide you with a IKeyCodeService injected by the AddFluentUIComponents method. Add the following component at the end of your MainLayout.razor file.

<FluentKeyCodeProvider />

Once the provider and service have been injected, you can:

• Retrieve the service and register the method that will capture the keys:

  [Inject]
  private IKeyCodeService KeyCodeService { get; set; }  // 👈
  
  protected override void OnInitialized()
  {
      KeyCodeService.RegisterListener(OnKeyDownAsync);  // 👈
  }
  
  public async Task OnKeyDownAsync(FluentKeyCodeEventArgs args) => { // ... }  // 👈
  
  public ValueTask DisposeAsync()
  {
      KeyCodeService.UnregisterListener(OnKeyDownAsync);
      return ValueTask.CompletedTask;
  }

• Implement the interface IKeyCodeListener, retrieve the service and register the method that will capture the keys:

  public partial MyPage : IDisposableAsync, IKeyCodeListener  // 👈
  {
      [Inject]
      private IKeyCodeService KeyCodeService { get; set; }  // 👈
  
      protected override void OnInitialized()
      {
          KeyCodeService.RegisterListener(this);  // 👈
      }
  
      public async Task OnKeyDownAsync(FluentKeyCodeEventArgs args) => { // ... }  // 👈
  
      public ValueTask DisposeAsync()
      {
          KeyCodeService.UnregisterListener(this);
          return ValueTask.CompletedTask;
      }
  }

Some keystrokes are used by the browser (e.g. Ctrl + A). You can disable this function using the PreventDefault attribute with the FluentKeyCodeProvider component.

<FluentKeyCodeProvider PreventDefault="true" />

Unit Tests

• FluentKeyCode: 100%
• FluentKeyCodeEventArgs: 100%
• FluentKeyCodeProvider: 45% (only a single method not tested, raised by JS: KeyDownHandler)
• KeyCodeService: 95%