Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

BlazorWebView WPF tab navigation improvements #7742

Merged
merged 1 commit into from
Jun 7, 2022

Conversation

MackinnonBuck
Copy link
Member

@MackinnonBuck MackinnonBuck commented Jun 3, 2022

Description of Change

Prior to this PR, the WPF BlazorWebView was not correctly handling tab navigation. The BlazorWebView control itself was participating in tab navigation in accordance with its IsTabStop and TabIndex properties, but its subtree (the underlying WebView2 control and its focusable HTML elements) was always last in the tab sequence and unaffected by those properties.

This PR changes the WPF BlazorWebView tab navigation behavior in the following ways:

  • By default, the BlazorWebView control itself cannot receive focus, but its children can. Prior to this change, using <tab> to move the focus from a control outside the WebView to the first HTML element inside the WebView required two presses, since the first press moved focus to the BlazorWebView container and the second press moved it to the first child.
  • Previously, setting IsTabStop="False" on the BlazorWebView would remove the container from the tab sequence, but not its children. Now, doing this removes all the BlazorWebView's children from the normal tab sequence. If you manually give an HTML element focus (e.g. by clicking it), you can navigate the webpage using the keyboard, but as soon as keyboard navigation escapes the BlazorWebView, it will stay that way (unless focus is somehow given to an HTML element again).

Issues Fixed

Fixes #2537

@MackinnonBuck MackinnonBuck requested a review from a team as a code owner June 3, 2022 19:57
@MackinnonBuck MackinnonBuck changed the title BlazorWebView tab navigation improvements BlazorWebView WPF tab navigation improvements Jun 3, 2022
@MackinnonBuck MackinnonBuck added the area-blazor Blazor Hybrid / Desktop, BlazorWebView label Jun 3, 2022
@MackinnonBuck
Copy link
Member Author

For the sake of reviewability, I've recorded a small demo showing the use of tab/shift+tab to navigate a simple WPF app with a BlazorWebView:

tab_navigation.mp4

Copy link
Member

@Eilon Eilon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't know how you figured this out, but this is amazing!

Copy link
Member

@javiercn javiercn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great!

Great job figuring this out!

@MackinnonBuck MackinnonBuck merged commit 14dda43 into main Jun 7, 2022
@MackinnonBuck MackinnonBuck deleted the mbuck/blazorwebview-tab-navigation branch June 7, 2022 17:59
rmarinho pushed a commit that referenced this pull request Jun 23, 2022
@github-actions github-actions bot locked and limited conversation to collaborators Dec 21, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
area-blazor Blazor Hybrid / Desktop, BlazorWebView fixed-in-7.0.0-rc.1.6683
Projects
None yet
Development

Successfully merging this pull request may close these issues.

WPF BlazorWebView TabStopOrder not working
4 participants