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

Focus disappears in CommandBarFlyout with SecondaryCommands, no PrimaryCommands #5857

Closed
shweaver-MSFT opened this issue Sep 9, 2021 · 1 comment · Fixed by #6044
Closed
Labels
area-Commanding AppBar, UICommand, MVVM, etc help wanted Issue ideal for external contributors team-Controls Issue for the Controls team

Comments

@shweaver-MSFT
Copy link

shweaver-MSFT commented Sep 9, 2021

Describe the bug

When using the CommandBarFlyout with SecondaryCommands and without PrimaryCommands, the focus can still land on the "See less" button part of the PrimaryCommands panel even though it isn't visualized.

Focus isn't really lost, since it can be recovered by continuing to arrow through the items. But it is confusing.

Steps to reproduce the bug

Steps to reproduce the behavior:

  1. Open a CommandBarFlyout instance that uses SecondaryCommands, but no PrimaryCommands.
  2. Use arrow keys to move focus beyond the first or last item.
  3. Observe the focus disappears and the "See less" button tooltip is displayed.
<Page
    x:Class="CommandBarFlyoutTest.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:CommandBarFlyoutTest"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:winui="using:Microsoft.UI.Xaml.Controls"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <StackPanel Spacing="4" Margin="48">
        <TextBlock>Invoke the button to show the flyout, then use the arrow keys to navigate up.</TextBlock>
        <TextBlock>You should see the focus visual disappear and a tooltip for the "See less" button, a part of the non-visible primary commands section of the CommandBarFlyout control.</TextBlock>
        <TextBlock>I would expect to not be able to focus on the "See less" button if it is not being visualized.</TextBlock>
        <Button Name="ShowButton" Content="Show flyout">
            <Button.Flyout>
                <winui:CommandBarFlyout Opened="OnFlyoutOpened" Closed="OnFlyoutClosed">
                    <winui:CommandBarFlyout.SecondaryCommands>
                        <AppBarButton Label="Option 1" />
                        <AppBarButton Label="Option 2" />
                    </winui:CommandBarFlyout.SecondaryCommands>
                </winui:CommandBarFlyout>
            </Button.Flyout>
        </Button>
    </StackPanel>
</Page>
using System.Linq;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace CommandBarFlyoutTest
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();

            Loaded += OnLoaded;
        }

        private void OnLoaded(object sender, RoutedEventArgs e)
        {
            // Set initial focus on load.
            ShowButton.Focus(FocusState.Keyboard);
        }

        private void OnFlyoutOpened(object sender, object e)
        {
            if (sender is Microsoft.UI.Xaml.Controls.CommandBarFlyout flyout)
            {
                var firstItem = flyout.SecondaryCommands.FirstOrDefault();
                if (firstItem is AppBarButton button)
                {
                    // Set focus to the first item.
                    button.Focus(FocusState.Programmatic);
                }
            }
        }

        private void OnFlyoutClosed(object sender, object e)
        {
            // Set focus back to the show button.
            ShowButton.Focus(FocusState.Programmatic);
        }
    }
}

Expected behavior

I would expect to not be able to focus on the "See less" button if it is not being visualized.

Screenshots

Button:
image

Flyout opened:
image

Focus is hidden, "See less" is visible:
image

Version Info

NuGet package version: Microsoft.UI.Xaml 2.6.2

Windows app type:

UWP Win32
Windows version Saw the problem?
Insider Build (22000) Yes
May 2021 Update (19043)
October 2020 Update (19042)
May 2020 Update (19041)
November 2019 Update (18363)
May 2019 Update (18362)
October 2018 Update (17763)
April 2018 Update (17134)
Fall Creators Update (16299)
Creators Update (15063)
Device form factor Saw the problem?
Desktop Yes
Xbox
Surface Hub
IoT

Additional context

@ghost ghost added the needs-triage Issue needs to be triaged by the area owners label Sep 9, 2021
@shweaver-MSFT shweaver-MSFT changed the title Focus disappears in CommandBarFlyout with SecondaryCommands Focus disappears in CommandBarFlyout with SecondaryCommands, no PrimaryCommands Sep 9, 2021
@StephenLPeters StephenLPeters added area-Commanding AppBar, UICommand, MVVM, etc help wanted Issue ideal for external contributors team-Controls Issue for the Controls team and removed needs-triage Issue needs to be triaged by the area owners labels Sep 13, 2021
@aqibbanday
Copy link
Contributor

Hi, there, i am able to reproduce the issue. I will check and try to fix the same.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area-Commanding AppBar, UICommand, MVVM, etc help wanted Issue ideal for external contributors team-Controls Issue for the Controls team
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants