Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

Does Xamarin.Forms.WebView respect TabIndex on UWP?

JohnHardmanJohnHardman GBUniversity admin

It appears that WebView is not respecting TabIndex on UWP. Could somebody check the following for me please?

In the following, when an instance of TestWebViewTabIndexPageView is pushed onto the NavigationStack, it shows a page with a Button, a WebView and then another Button. The TabIndex values are set such that tabbing is intended to go through the Button, WebView and Button in that order. However, using XF 4.8 on UWP, I am finding that the tabbing goes Button, Button, WebView rather than Button, WebView, Button. Could somebody confirm that please?

(there's also the question of where the following three tabs go too, but that's an old question that I first raised in the days of Bugzilla. Still haven't had an answer to that...)

using Xamarin.Forms;

using System.Threading.Tasks;

namespace ViewsUsingXamarinForms
{
    public class TestWebViewTabIndexPageView : ContentPage
    {
        private bool _firstTimeOnAppearing = true;

        public TestWebViewTabIndexPageView()
        {
            PopulatePage();
        }

        protected override void OnAppearing()
        {
            base.OnAppearing();

            if (_firstTimeOnAppearing)
            {
                _firstTimeOnAppearing = false;

                //PopulatePage();

                // The following is just here as a convenience.
                // It's a nasty, hacky way of setting the initial focus, 
                // that introduces a race condition. Good enough for
                // this repro sample though.
                Task.Run(async () =>
                {
                    await Task.Delay(1000);
                    Xamarin.Essentials.MainThread.BeginInvokeOnMainThread(() =>
                    {
                        if (_button1 != null)
                            _button1.Focus();
                    });
                });
            }
        }

        private Button _button1;
        private Button _button2;
        private WebView _webView;

        private void PopulatePage()
        {
            _button1 = new Button
            {
                Text = "Button 1 (TabIndex = 1)",
                TextColor = Color.Black,
                BackgroundColor = Color.White,
                TabIndex = 1,
                VerticalOptions = LayoutOptions.Start
            };

            _webView = new WebView
            {
                BackgroundColor = Color.White,
                HorizontalOptions = LayoutOptions.Fill,
                TabIndex = 2,
                VerticalOptions = LayoutOptions.FillAndExpand,
                Source = new HtmlWebViewSource
                {
                    Html = "<html><body>Hello (TabIndex=2)<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29</body></html>"
                }
            };

            _button2 = new Button
            {
                Text = "Button 2 (TabIndex=3)",
                TextColor = Color.Black,
                BackgroundColor = Color.White,
                TabIndex = 3,
                VerticalOptions = LayoutOptions.End
            };

            Content = new StackLayout
            {
                HorizontalOptions = LayoutOptions.Fill,
                VerticalOptions = LayoutOptions.Fill,
                BackgroundColor = Color.Pink,
                Children =
                {
                    _button1,
                    _webView,
                    _button2
                }
            };
        }
    }
}
Tagged:

Best Answer

Answers

  • JohnHardmanJohnHardman GBUniversity admin

    Thanks @LandLu. I had seen that documentation page previously, but (a) hadn't noticed that WebView was completely missing from it, and (b) had assumed that it was implying that because TabIndex is so key on Windows that UWP would be completely supported but no promises were being made for other platforms. I must remember not to make assumptions :-)

    I already have a custom WebView class and a custom renderer, so I'll see if I can quickly tweak those to implement TabIndex for my custom WebView.

  • JohnHardmanJohnHardman GBUniversity admin
    edited October 15

    A bit more investigation shows that this is a limitation of UWP itself, so not something that can be fixed in a custom renderer in a XF app :-(

    To get a desired tab order involving a WebView on UWP apparently requires the XAML (or C# UI) to be constructed in the desired tab order with TabIndex values set to int.MaxValue (not the zero that Xamarin documentation says is the default value). That's a nuisance, to say the least.

Sign In or Register to comment.