FocusTrap: Fix outline focus

[LiZzeira]

Description

Locate the problem within the MudFocusTrap component. You can typically find the relevant code in the Razor component file.

In the Razor component file, navigate to the specific line (e.g., line 22) where the MudFocusTrap component is defined using the

tag.

Within this

element, you'll want to add an existing CSS class called "outline-none." This class is commonly available in MudBlazor and is used to remove unwanted outlines or focus styles.

Before:
https://github.com/MudBlazor/MudBlazor/assets/79289665/e197d41d-5847-4943-8e09-7d5f7a2f2f93

After:
https://github.com/MudBlazor/MudBlazor/assets/79289665/fa4ab9b6-325b-477a-b8c1-e8b385fce841

How Has This Been Tested?

To test the problem:

Open a web browser that uses the Chromium engine, such as Google Chrome or Microsoft Edge.

Load the web page or web application that contains the MudFocusTrap component you want to test.

Open the dialog or window that contains the MudFocusTrap component. Ensure that the dialog is visible on the screen.

Within the content of the dialog, click on an area where there are no other interactive components, such as buttons or text input fields.

Press any key on the keyboard. Notice that an unwanted focus or outline may become visible around the MudFocusTrap component.

Dialog - MudBlazor - Google Chrome 2023-11-30 10-10-48.zip

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist:

• The PR is submitted to the correct branch (dev).
• My code follows the code style of this project.
• I've added relevant tests.

[ScarletKuro]

Hi.

Thanks for PR.
Sorry that it took so long to notice the PR...
Could you post a before and after picture or a gif?

[LiZzeira]

Hello.

Here are the videos

Before: https://github.com/MudBlazor/MudBlazor/assets/79289665/e197d41d-5847-4943-8e09-7d5f7a2f2f93

After: https://github.com/MudBlazor/MudBlazor/assets/79289665/fa4ab9b6-325b-477a-b8c1-e8b385fce841

[danielchalmers]

Tested it out and is a nice improvement

[danielchalmers]

I wonder if the focus trap is part of the cause of #4283

[LiZzeira]

it seems to be the solution to this problem

[henon]

@LiZzeira are you saying this PR closes #4283 ? Are you sure about that?

[LiZzeira]

@henon I'm not sure, but I'm testing this case

[danielchalmers]

it seems to be the solution to this problem

Would be so great if it worked because it's been causing issues for years. Another example in #8451

[LiZzeira]

I found the cause of this problem; it's not in the FocusTrap but in the style applied to the MudButton. I will try to solve this problem in the best way possible and push a new update.

[henon]

@LiZzeira that would be kind of you. Just open another PR please, I am merging this one.

[LiZzeira]

@henon @danielchalmers
I made the correction regarding the problem with the focus on the button

[LiZzeira]

New PR open
#8575