microsoft / microsoft/fluentui-blazor

feat: add `Ignore` and `Only` and `PreventDefault` parameters to global `FluentKeyProvider`

Open
#4,519 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

feature v5
Dominant language
C#
Stars
4.8k
Forks
483
Avg merge
14h 41m
Merged PRs (30d)
68

Description

🙋 Feature Request

When using the global FluentKeyProvider approach then you are very limited in it's use-case.
https://fluentui-blazor-v5.azurewebsites.net/KeyCode

You can set PreventDefault="true" but this will prevent all native shortcuts and even FluentUI Blazor features like closing dialogs with ESC key.

You might want to setup some global keycodes which should be prevented by default and the logic for them needs to implemented on a per page basis.

This is currently not possible. You can only achieve this behaviour by either

  1. Use the FluentKeyCode component directly on the page which is limited because the element needs to be within the FluentKeyCode area and it needs to have an active focus
  2. Provide FluentKeyCode on MainLayout.razor and register events on a per page basis like this:
Image

Which introduces a lot of boilterplate and hard to manage code for the developer.

💁 Possible Solution

When using KeyCodeService.RegisterListener(this); we could pass in options like PreventDefault, Ignore and Only parameters like in FluentKeyCode

🔦 Context

This issue can be seen in live action the v4 branch as well https://www.fluentui-blazor.net/ press / to trigger search but then you see that the / will be within the input as well. When using PreventDefault on the FluentKeyProvider then literally all component functionality which is based on KeyCode will stop working because it will be prevented.

💻 Examples

I have crafted together this v5 sample app.
https://github.com/MarvinKlein1508/KeyCodeV5

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reviewing the FluentKeyProvider usage, KeyCodeService.RegisterListener(this), and the FluentKeyCode and MainLayout.razor approaches described in the issue. Trace how global listeners handle PreventDefault and how per-component key handling remains functional; done means the requested Ignore, Only, and PreventDefault options can be configured for global listeners without blocking unrelated Fluent UI shortcuts.

Written by the indexing model from the issue text.

Assessment

Tech stack
csharp
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.