Can't enter enter text in TextBox control inside Flyout

Question

I want to use the CommandBar and a Flyout to build something like this.

The user should click the button in the CommandBar (Flyout opens), then enter text in the TextBox and then click the button on the right of TextBox to start the search request. The problem is, that when I click at the TextBox I can't enter text. It seems that it loses the focus, before I can write something. Below is the sample code. Whats wrong?

<Page.Resources>
    <DataTemplate x:Key="Search">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="200" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <TextBox Grid.Column="0" />
            <AppBarButton Grid.Column="1" Icon="Find" />
        </Grid>
    </DataTemplate>
</Page.Resources>

<Grid>
    <CommandBar RequestedTheme="Dark">
        <AppBarButton Icon="Find">
            <AppBarButton.Flyout>
                <Flyout Placement="Bottom" >
                    <ContentPresenter ContentTemplate="{StaticResource Search}"/>
                </Flyout>
            </AppBarButton.Flyout>
        </AppBarButton>
    </CommandBar>
</Grid>

Northcliffe

I cannot reproduce your issue. Everything works fine with your provided code. Are you doinf something in codebehind blocking that textbox? – Chessy

Be careful with this, on touchscreen devices the onscreen keyboard can be in a layer on top of the flyout effectively hiding the textboxes. If you then want to hide the keyboard by clicking an area outside the flyout on the screen, that will also close the flyout. Not a very good UX – Pathway

Answer 1

Set AllowFocusOnInteraction property to true on the AppBarButton.

Solution in XAML (if app min. target version is 10.0.14393 or higher)

    <AppBarButton x:Name="myAppBarButton"
                  Icon="Find"
                  AllowFocusOnInteraction="True">
        <AppBarButton.Flyout>
            <Flyout Placement="Bottom" >
                <ContentPresenter ContentTemplate="{StaticResource Search}"/>
            </Flyout>
        </AppBarButton.Flyout>
    </AppBarButton>

If the app's minimum version is lower than Anniversary update 1607 (build 10.0.14393) (even if your target version is 1607 or higher), you can't set the AllowFocusOnInteraction property directly in XAML. Instead, you should do it in code-behind.

Solution in C# code-behind

// check if the AllowFocusOnInteraction property is available on the platform 
if (Windows.Foundation.Metadata.ApiInformation.IsPropertyPresent("Windows.UI.Xaml.FrameworkElement", "AllowFocusOnInteraction"))
     myAppBarButton.AllowFocusOnInteraction = true;

You can also wrap it into an attached property that can be used in XAML even on old Windows 10 versions.

More info

This is a new feature on Windows 10 Anniversary update (1607), build 14393.

That's an improvement for most app bar uses but interferes with yours, so you'll need to override the default value when you change your build to rather 14393 instead of 10586.

Here's a blog post ComboBox on a Flyout attached to an AppBarButton loses mouse input on 1607. It also contains the attached property implementation.

Doby

I am getting this compile error if setting property in xaml. XBF syntax error '0x09C4' : Property Not Found. Check if the property you are setting in XAML exists in the minimum version of the platform being specified in the project (TargetPlatformMinVersion) – Delinquent

That's right. As I stated in the answer, you are targeting Windows 10 Anniversary update (1607) build 14393 or higher, but the app's minimum Windows 10 version is lower, you should check if the AllowFocusOnInteraction property is available on the platform. So you can't set the AllowFocusOnInteraction property in XAML. Instead, do it in code-behind. – Doby

Another solution would be to create an attached property that incapsulates this behavior and use this attached property in XAML. – Doby

I did the same attached property @Artemious – Delinquent

Answer 2

your TextBox is actually never getting focus at all, somehow flyout prevents it, the only action I can get from this TextBox is PointerOver state - causing it to look like it's got focus, but it is not.

You need to set the focus in the code, for example when the flyout opens - it works, but may be not the nicest solution, cause you need to name the TextBox in order to get it from code behind.

<Grid>
    <CommandBar RequestedTheme="Dark">
        <AppBarButton Icon="Find">
            <AppBarButton.Flyout>
                <Flyout Placement="Bottom" Opened="FlyoutBase_OnOpened">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="200" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <TextBox x:Name="Test"/>
                        <AppBarButton Grid.Column="1" Icon="Find"/>
                    </Grid>
                </Flyout>
            </AppBarButton.Flyout>
        </AppBarButton>
    </CommandBar>
</Grid>

and then code behind:

private void FlyoutBase_OnOpened(object sender, object e)
{
    Test.Focus(FocusState.Programmatic);
}

Halogen

Is this a bug in the framework or is it normal to set the focus in code behind? – Northcliffe

Looks like a bug, especially if what Toth Tibor wrote (that it happens only with anniversary update) is true. Setting focus in the code behind is more like "hack" here and definitely not nice solution (but works though). Microsoft will fix this or not, there are many bugs with other stuff over UWP that MS didn't fix for ages, so I would rather won't wait for it. Especially if there is no place where someone can post a bug report. – Halogen

Answer 3

I can reproduce the issue. I think it's a bug in the Anniversary Update (1607) SDK (14393), because if I downgrade the target SDK to 10586 everythink work fine.

ps.: I don't know how to report this bug to the Microsoft.

Rain