locked
SearchBox Not Receiving Initial Focus When Key Pressed

    Question

  • Hi,

    I'm hoping someone can help me; I am building a Windows 8.1 Store app in XAML and C# and I have added a top appbar containing a SearchBox control to the main page. The idea is that the user presses a key on the keyboard and the top appbar opens up with the typed character already in the SearchBox, which now has the focus and further keystrokes
    will appear as the user types. Unfortunately, the first time a suitable (i.e. alphanumeric) key is pressed, the appbar opens up but the focus is not on the SearchBox and the typed character is simply ignored. If I hit the tab key once, then the focus is moved to the SearchBox and any further keystrokes appear as you'd expect. Further investigation and debugging has revealed that there is a ScrollViewer somewhere, which is getting the focus first of all and thus preventing the SearchBox from getting it directly. As far as I can tell, this ScrollViewer is not one that I have set up in my XAML code explicitly, so I am at a loss as to where it might be and how to stop it getting the initial focus?

    Putting my application aside, I created a new project (very minimal) using the blank application template in VS2013, added a top appbar with a searchbox control, ensured that the FocusOnKeyboardInput was set and that the
    PrepareForFocusOnKeyboardInput event was catered for in my code-behind, ran it and saw exactly the same behaviour. It happens when running on both my local machine using a physical keyboard and in the simulator using the virtual keyboard.

    The code for this minimal project is as follows:

    XAML:

    <Page
        x:Class="TestSearchApp.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:TestSearchApp"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
        
        <Page.TopAppBar>
            <AppBar>
                <Grid x:Name="searchBox">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <StackPanel Orientation="Horizontal"/>
                    <StackPanel Grid.Column="1" HorizontalAlignment="Right" Orientation="Horizontal">
                        <SearchBox Width="200" IsTabStop="True" FocusOnKeyboardInput="True" PrepareForFocusOnKeyboardInput="SearchBox_PrepareForFocusOnKeyboardInput" PlaceholderText="e.g. Fred" VerticalAlignment="Center"/>
                    </StackPanel>
                </Grid>
            </AppBar>
        </Page.TopAppBar>
    
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    
        </Grid>
    </Page>

    C#:

    using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using System.Runtime.InteropServices.WindowsRuntime;
    using Windows.Foundation;
    using Windows.Foundation.Collections;
    using Windows.UI.Xaml;
    using Windows.UI.Xaml.Controls;
    using Windows.UI.Xaml.Controls.Primitives;
    using Windows.UI.Xaml.Data;
    using Windows.UI.Xaml.Input;
    using Windows.UI.Xaml.Media;
    using Windows.UI.Xaml.Navigation;
    
    // The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
    
    namespace TestSearchApp
    {
        /// <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 SearchBox_PrepareForFocusOnKeyboardInput(SearchBox sender, RoutedEventArgs args)
            {
                this.searchBox.Visibility = Windows.UI.Xaml.Visibility.Visible;
                this.TopAppBar.IsOpen = true;
            }
        }
    }

    I am using VS2013 Update 1 on a Windows 8.1 Pro x64 machine.

    I have tried going through both my original application and this basic app and disabling/hiding any ScrollViewers I could find, but it makes no difference. I must therefore assume that either I am misunderstanding the basic concept of search-to-type or I have not set something up correctly.

    Try as I might though, I cannot work out whether I might be doing something wrong or what I might be missing or where this ScrollViewer is located. Can anyone advise/assist, please?

    Thanks,

    Martin

    Thursday, February 27, 2014 8:54 PM

Answers

  • Hi Martin,

    Thanks for your minimal demo project, I can reproduce the issue that you are facing.

    Try to remove this setting should be ok.

     IsTabStop="True"

    --James

    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    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.

    • Marked as answer by mchatt01 Friday, February 28, 2014 5:57 PM
    Friday, February 28, 2014 4:30 AM
    Moderator

All replies

  • Hi Martin,

    Thanks for your minimal demo project, I can reproduce the issue that you are facing.

    Try to remove this setting should be ok.

     IsTabStop="True"

    --James

    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    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.

    • Marked as answer by mchatt01 Friday, February 28, 2014 5:57 PM
    Friday, February 28, 2014 4:30 AM
    Moderator
  • Thanks for the reply James.

    Ahhh,... you mean remove the IsTabStop setting from the SearchBox itself! Now it's working.

    I assumed that the SearchBox had to have this set as this is where the focus was intended to go which is why it never occurred to me that it was this control that was causing the problem. As the SearchBox doesn't show any ScrollViewer settings in the Properties window, I assumed that it was another control that was giving me grief and sent me off in the wrong direction.

    Many thanks.

    Martin

    Friday, February 28, 2014 5:57 PM