[UWP] Set Focus on Textbox not working

Question

Hi, I have a problem in my UWP App. The situation is simple:

I have a textbox and a button, the button opens a Flyout Menu with basic clipboard actions like Cut, Copy and Paste options. I handle the OnClick event on each MenuItem in the FlyoutMenu to cut, copy or paste text from the textbox and after that i call

textbox.Focus(FocusState.Programmatic)

The problem is the textbox never gets the focus, even when the method returns true. After the method excecution I press Tab and the focus still was on the button (the one containing the MenuFlyout not the MenuFlyoutItem).

Thanks in advance

Answer 1

Hello Leisvan Cordero,

Its good that you have described your problem but could you post your XAML and backend code so we can reproduce it on our side exactly?

According to Control.Focus method 

" You typically pass FocusState.Programmatic as the parameter to indicate the control obtained focus through a deliberate call to the Focus method. For example, if clicking an "Edit" button causes focus to be set on a TextBox, use the Programmatic focus state. "

>>The problem is the textbox never gets the focus, even when the method returns true. After the method excecution I press Tab and the focus still was on the button (the one containing the MenuFlyout not the MenuFlyoutItem).

How about attaching the GotFocus event so when you set the focus programmatically can you check if the event is fired or not?

Also please check that IsTabStop property is set to true.

With Regards,

Krunal Parekh

---

Thanks MSDN Community Support Please remember to Mark as Answer the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

Answer 2

Apparently when you click a MenuFlyoutItem the MenuFlyout closes and the focus returns to the button that opened the MenuFlyout in the first place. Because I set the focus to the textbox in the OnClick event of the MenuFlyout but something happens with the focus after that and the textbox never got the focus.

I experiment something and it kind of worked. I handle the Closed event in the MenuFlyout and there i set the focus to the textbox, that way the textbox got the focus. Visually it felt a little weird because there are some msec between the disappearance of the Flyout and the Textbox focus but it solved the problem. Anyway if there is a better solution i will be very thankful.

Here comes the code:

MainPage.xaml:

<Page
    x:Class="SampleApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SampleApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <StackPanel d:LayoutOverrides="TopPosition, BottomPosition" Orientation="Horizontal">
            <AppBarButton x:Name="appBarButton" HorizontalAlignment="Stretch" Icon="Edit" Label="appbarbutton" VerticalAlignment="Stretch" Width="60" IsCompact="True">
                <AppBarButton.Flyout>
                    <MenuFlyout Closed="MenuFlyout_Closed">
                        <MenuFlyoutItem Text="Cut" MinWidth="140"/>
                        <MenuFlyoutItem Text="Copy" Click="MenuFlyoutItem_Click"/>
                        <MenuFlyoutItem Text="Paste"/>
                    </MenuFlyout>
                </AppBarButton.Flyout>
            </AppBarButton>
        </StackPanel>
        <TextBox x:Name="textContainer" Grid.Row="1" TabIndex="0" Margin="0" Padding="25,30,25,2" BorderThickness="0" ScrollViewer.VerticalScrollBarVisibility="Auto" AcceptsReturn="True" AllowDrop="True" ScrollViewer.HorizontalScrollBarVisibility="Auto" d:LayoutOverrides="TopPosition, BottomPosition" />
    </Grid>
</Page>

MainPage.xaml.cs:

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace SampleApp
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        private void MenuFlyoutItem_Click(object sender, RoutedEventArgs e)
        {
            //Some Code here

            /* 
             * After this something happens and the textbox 
             * never got the focus
             */
            textContainer.Focus(FocusState.Programmatic);
        }

        private void MenuFlyout_Closed(object sender, object e)
        {
            /*
             * But if you handle the Close event of the MenuFlyout
             * then the textbox got focus.
            */
            textContainer.Focus(FocusState.Programmatic);
        }
    }
}