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

ContentDialog focus highlight is shown when dialog is opened via a keyboard event #10315

Open
daverayment opened this issue Jan 24, 2025 · 0 comments
Labels
bug Something isn't working needs-triage Issue needs to be triaged by the area owners

Comments

@daverayment
Copy link

daverayment commented Jan 24, 2025

Describe the bug

When a ContentDialog is shown which contains interactive controls, the display of the focus highlight is inconsistent:

  1. If the dialog is opened via a button click, the highlight is not shown. The first interactive control on the dialog is focussed, but the highlight is not shown.
  2. If the dialog is opened via a KeyUp event handler or in response to a KeyboardAccelerator invocation, the focus highlight is shown.

Steps to reproduce the bug

  1. Create a new project in Visual Studio. Choose "Blank App, Packaged (WinUI 3 in Desktop)" as the project template.

  2. Name the project "CheckboxTest".

  3. Replace the MainWindow.xaml file contents with the XAML below:

<Window
    x:Class="CheckboxTest.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:CheckboxTest"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="ContentDialog Focus Test">

    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Button Name="ShowDialogButton" Content="Show Dialog" Click="ShowDialogButton_Click" />
        <ContentDialog
            x:Name="DeleteConfirmationDialog"
            Title="Delete file"
            PrimaryButtonText="Move to Recycle Bin"
            CloseButtonText="Cancel"
            DefaultButton="Close">
            <StackPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Spacing="12">
                <TextBlock TextWrapping="Wrap" Text="Are you sure you want to move file 'somefile.jpg' to the Recycle Bin?" />
                <CheckBox x:Name="DeleteDontAskCheckbox" Content="Don't ask me again" />
            </StackPanel>
        </ContentDialog>
    </StackPanel>
</Window>
  1. Replace the MainWindow.xaml.cs file code with:
using System;
using System.Threading.Tasks;
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Input;

namespace CheckboxTest;

public sealed partial class MainWindow : Window
{
    public MainWindow()
    {
        this.InitializeComponent();
        this.Content.KeyUp += Content_KeyUp;
    }

    private async void Content_KeyUp(object sender, KeyRoutedEventArgs e)
    {
        if (e.Key == Windows.System.VirtualKey.Delete)
        {
            if (await OpenDeleteDialog() == ContentDialogResult.Primary)
            {
                // ... do delete stuff
            }
        }
    }

    private async void ShowDialogButton_Click(object sender, RoutedEventArgs e)
    {
        if (await OpenDeleteDialog() == ContentDialogResult.Primary)
        {
            // ... do delete stuff
        }
    }

    private async Task<ContentDialogResult> OpenDeleteDialog()
    {
        DeleteConfirmationDialog.XamlRoot = Content.XamlRoot;
        return await DeleteConfirmationDialog.ShowAsync();
    }
}
  1. Run the project and click the "Show Dialog" button. Observe that the dialog is shown with no focus highlight present on the checkbox control:

Image

  1. Close the dialog by pressing Enter or selecting the "Cancel" button.

  2. Press Delete. Observe that the dialog is shown with the first interactive element highlighted as the focussed control:

Image

Expected behavior

The display of the focus highlight should be consistent, i.e. independent of the method used to show the ContentDialog. I suggest not showing the highlight until the user uses Tab to move the focus around the dialog's controls.

Screenshots

No response

NuGet package version

None

Windows version

Windows 11 (24H2): Build 26100

Additional context

Additional context may be found on my StackOverflow question here: https://stackoverflow.com/questions/79376328/winui-3-how-to-set-focus-to-a-contentdialog-button/79382988

@daverayment daverayment added the bug Something isn't working label Jan 24, 2025
@microsoft-github-policy-service microsoft-github-policy-service bot added the needs-triage Issue needs to be triaged by the area owners label Jan 24, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working needs-triage Issue needs to be triaged by the area owners
Projects
None yet
Development

No branches or pull requests

1 participant