locked
Focussing a WebView after a MessageDialog is closed

    Question

  • I've got a contentEditable based editor within a WebView in my Windows Store app. Certain keyboard shortcuts and buttons can cause a MessageDialog to open (intentionally). When this dialog is dismissed, the editor no longer has focus. I've tried setting focus every way I know, and it won't work. Here's a sample app which illustrates the issue

    MainPage.xaml

        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <WebView x:Name="Editor" Margin="200"></WebView>
        </Grid>
    
        <Page.BottomAppBar>
            <CommandBar x:Name="CommandBar_Editor" Visibility="Visible">
                <AppBarButton Label="Debug" Icon="Setting">
                    <AppBarButton.Flyout>
                        <MenuFlyout>
                            <MenuFlyoutItem Text="show dialog, then focus" Click="MenuFlyoutItem_Click_1"/>
                        </MenuFlyout>
                    </AppBarButton.Flyout>
                </AppBarButton>
            </CommandBar>
        </Page.BottomAppBar>
    </Page>

    MainPage.xaml.cs

    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }
    
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            base.OnNavigatedTo(e);
            Editor.NavigateToString("<script type='text/javascript'>function focus_please(){ document.getElementById('editor').focus(); }</script><div id='editor' contentEditable='true'>It was the best of times, it was the worst of times</div>");
        }
    
        private async void MenuFlyoutItem_Click_1(object sender, RoutedEventArgs e)
        {
            MessageDialog dialog = new MessageDialog("this should set focus to editor on close", "test");
            UICommand okCommand = new UICommand("OK");
            dialog.Commands.Add(okCommand);
    
            IUICommand response = await dialog.ShowAsync();
    
            if (response == okCommand)
            {
                await Window.Current.CoreWindow.Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () =>
                {
                    Editor.Focus(FocusState.Programmatic);
                });
                await Window.Current.CoreWindow.Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () =>
                {
                    Editor.InvokeScript("focus_please", null);
                });        
    	}
        }
    }

    The code above will work if the user is using the touch interface. That is, if the message dialog is dismissed with a touch, the div within the WebView focusses. 

    However, if the user is using Mouse / Keyboard and clicks to dismiss the dialog, the div will not focus.

    Is this a bug in WinRT? Is there any known workaround? 


    • Edited by Roryok Wednesday, January 28, 2015 8:30 PM
    Wednesday, January 28, 2015 8:28 PM

All replies

  • Hi Roryok - I worked on this issue when you had the StackOverflow question.  I could not get it to work only sometimes.  I am going to file a bug on this issue.

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Thursday, January 29, 2015 3:36 PM
    Moderator