Web/Desktop Focus should follow the DOM Tree or Widget Tree as a default

[phackwer]

Use case

As a Web Developer, we are used to have the Focus of the tab key to follow one of those two things:

1 - DOM tree: deafault behaviour, when you hit TAB the focus moves to next input in the page in the order they were added to the DOM tree, so if I have a div with 3 fields acting as a column, and another div with 4 fields in another column, the tab order would be to go to the first 3 items in the same column and then go to the next 4 in the second column. In a table, it would go to the first cell and then the second cell in the same row and so on. This is a default standard on web inputs behaviour.

2 - Tab Index: this overwrites the standard behaviour on a page and make the tab to follow the order.

At the moment we don't have such approach on Flutter. We have a left to right top to down approach which causes the following problem: on a page that has 2 widgets with inputs as children and a drawer on the right with input itens, the focus goes to the first item of the first column/widget, then the first item of the second column/widget, and then to the first item on the drawer. If we consider that those widgets are groups of information (Personal Data - First Name, Last Name, Email - Organisation Data - Org Name, Org Address - and Page Settings - theme, wallpaper), this means that the navigation ends to be:

First Name -> Org Name -> Page Theme -> Last Name, -> Org Address -> Wallpaper -> Email -> Submit button

This is quite broken from a user perspective. Since those information were grouped as widgets the navigation should be

First Name -> Last Name -> Email -> Org Name -> Org Address -> Submit button (and if you keep hitting tab, Theme and Wallpaper).

Proposal

Tab key should go to the next sibling input into the children list of a widget, and if none is found, go to next widget till it reaches the end of the inputs, and goes back to the first in the page. The Widget structure is already a tree so the Tab Navigation should follow the context of the parent Widget of the Inputs till it reaches the end and needs to go to next widget or cycle back to the start of the tree.

So, full navigation logic for the presented case would be like:
Anybody request focus first? Go to that input (that way a search input on top that is not requesting the focus would not get it as the first input, only when it cycles back to the top of the tree)
PersonalInfoWidget
FirsNameInput gets focus
Tab key pressed in the context of PersonalInfoWidget. Is there a sibling? Goes to it.
LastNameInput gets focus
Tab key pressed in the context of PersonalInfoWidget. Is there a sibling? Goes to it.
EmailInput gets focus
Tab key pressed in the context of PersonalInfoWidget. Is there a sibling? No? Goes to next Widgett o
OrgInfoWidget
OrgNameInput gets focus

And so on until last there is no more siblings, so we go back to the top of the tree.

[phackwer]

Obs: I'm aware the strategy can be overwritten by me, but I still believe default behaviour should be in there and not to be done by developers (they can overwrite it, but the current default is just not good.

[geriby23]

I agree with @phackwer, currently, I have similar troubles in my project, it's a small thing but it's really important. There should be some elegant solution for tabbing direction in the form.

[phackwer]

@geriby23 , thanks. :-D So, I'm not alone. 👍

[ferhatb]

/cc @gspencergoog

[gspencergoog]

It is possible to change the default for web to be WidgetOrderTraversalPolicy, but it often doesn't turn out to be that good of a default ordering, and it would make your app act inconsistently on other platforms by default.

However, you can try out that ordering yourself by adding this in your app:

Widget build(BuildContext context) {
  return MaterialApp(
    home: FocusTraversalGroup(
      policy: WidgetOrderTraversalPolicy(),
      child: MyApp(),
    ),
  );
}

If you want to specify the traversal order explicitly (as in your tab order case), you can use OrderedTraversalPolicy as shown in the example there (although currently DartPad isn't working with it, but that's unrelated to this issue).

[Note: these APIs are only available on the beta channel or newer at the moment, but soon will be on stable.]

[phackwer]

Well, I've done something crazy here and it's working (also because we wanted ENTER key behaviour for the fields to be like the html submit)

For every input widget we have, I add a focusNode which calls a method to deal with the keys(enter, tab and shift+tab) and at the same time register this focusNode on what I've called KeyboardNavigationService. Since this registration happens on the exact same order widgets are rendered in the screen, this kind of forces the navigation to respect the grouping I've done to the screen and also respect the responsiveness of my components, so, basically, it pretty much makes the app to behave as a standard HTML form with the DOM tree being used like it would on a normal web app.

This onRawKeyboardEvent method then knowing what key or combination has been pressed will call the method to submit the form or
locator().goNext(_inputListenerFocusNode); or locator().goPrevious(_inputListenerFocusNode); This basically tells my service from where to move forward or back in the array of FocusNodes and from where. Some magic done checking the position of _inputListenerFocusNode to go to 0 or end and.. VOILA! :D Depending on where this _inputListenerFocusNode is in the array I will call _inputListenerFocusNode.previousNode() or _inputListenerFocusNode.nextNode() as not necessarily all components will be registerd in this array.

So far it seems to be working.

And now I know there is also a FocusManager that seems to be another option to do this. I definitely will review and refactor what I've done as I don't want to be maintaining this forever, but for now, this will be what we will use.

A bad thing only is that this KeyboardNavigationService needs to be reset on every page reload. :-/ Otherwise FocusNodes are kept there when not in use. :-/

[phackwer]

@gspencergoog - I've tried your solution and it did not work as we wanted.

So, here is the "input" I've made at the moment (I will read about the FocusManager as I'm feeling that it may already have what I need) and the KeyboardNavigatinService. This is experimental code, but worked like a charm. I'm usng GetIt to create a service layer for my application, so far I have 3, one of them to bypass the slowliness of reading the SharedPreferences storage - I basically read it all to memory before running the app and now gets and setters return values from memory and only call the write on the set (so, set in memory and then write to slow sharedpref async).

Am I missing something or there is no "services" in flutter to share data between widgets and run other tasks like this keyboard navigation?

[phackwer]

Tab Key and Enter aware Input (onEnterKeySubmitDataFunction is mandatory, as we don't do widgets for input as a decorative thing, so, it just made sense for us to have it mandatory)

    import 'package:flutter/cupertino.dart';
    import 'package:flutter/foundation.dart';
    import 'package:flutter/material.dart';
    import 'package:flutter/services.dart';
    import 'package:yoda/app_services.dart';
    import 'package:yoda/common/services/keyboard_navigation_service.dart';
    
    // ignore: must_be_immutable
    class KeyAwareTextFormField extends StatefulWidget {
      String labelText;
      String errorText;
      Function validator;
      Function onChanged;
      Function onEnterKeySubmitDataFunction;
      Icon icon;
      bool obscureText;
      TextInputType keyboardType;
      Border border;
      TextEditingController controller;
    
      KeyAwareTextFormField(
          {this.border,
          this.errorText,
          @required this.onEnterKeySubmitDataFunction,
          @required this.labelText,
          this.onChanged,
          this.controller,
          this.validator,
          this.icon,
          this.keyboardType,
          this.obscureText = false})
          : assert(
              labelText != null,
              'A non-null String must be provided to a Text widget.',
            ),
            assert(
              onEnterKeySubmitDataFunction != null,
              'You MUST inform the function called on the submission of this form so Enter Key acts properly.',
            );
    
      @override
      _KeyAwareTextFormFieldState createState() =>
          _KeyAwareTextFormFieldState(
            border: this.border,
            errorText: this.errorText,
            onEnterKeySubmitDataFunction: this.onEnterKeySubmitDataFunction,
            labelText: this.labelText,
            onChanged: this.onChanged,
            controller: this.controller,
            validator: this.validator,
            icon: this.icon,
            keyboardType: this.keyboardType,
            obscureText: this.obscureText = false,
          );
    }
    
    class _KeyAwareTextFormFieldState
        extends State<KeyAwareTextFormField> {
      String labelText;
      String errorText;
      Function validator;
      Function onChanged;
      Function onEnterKeySubmitDataFunction;
      Icon icon;
      bool obscureText;
      TextInputType keyboardType;
      Border border;
      TextEditingController controller;
    
      FocusNode _inputListenerFocusNode;
    
      _KeyAwareTextFormFieldState(
          {this.border,
          this.errorText,
          @required this.onEnterKeySubmitDataFunction,
          @required this.labelText,
          this.onChanged,
          this.controller,
          this.validator,
          this.icon,
          this.keyboardType,
          this.obscureText = false}) {
        _inputListenerFocusNode =
            FocusNode(onKey: (FocusNode node, RawKeyEvent event) {
          onRawKeyboardEvent(event);
          return true;
        });
        locator<KeyboardNavigationService>().appendToList(_inputListenerFocusNode);
      }
    
      /**
       * Handles key events (enter and tab/shift+tab navigation)
       * When
       */
      onRawKeyboardEvent(RawKeyEvent event) {
        if (event is RawKeyUpEvent) {
          if (event.logicalKey == LogicalKeyboardKey.enter) {
            onEnterKeySubmitDataFunction();
          } else if (event.data is RawKeyEventDataWeb) {
            final data = event.data as RawKeyEventDataWeb;
    
            if (data.keyLabel == "Tab" && !data.isShiftPressed) {
              print('Navigate to next registeres FocusNode');
              locator<KeyboardNavigationService>().goNext(_inputListenerFocusNode);
            }
    
            if (data.keyLabel == "Tab" && data.isShiftPressed) {
              print('Go Back to Previous Node');
              locator<KeyboardNavigationService>()
                  .goPrevious(_inputListenerFocusNode);
            }
    
            if (data.keyLabel == 'Enter') {
              print('Enter key');
              onEnterKeySubmitDataFunction();
            }
          } else if (event.data is RawKeyEventDataAndroid) {
            final data = event.data as RawKeyEventDataAndroid;
    
            if (data.keyCode == 13) {
              onEnterKeySubmitDataFunction();
            }
          }
        }
        return event;
      }
    
      @override
      Widget build(BuildContext context) {
        return TextFormField(
          focusNode: _inputListenerFocusNode,
          textInputAction: TextInputAction.next,
          autofocus: true,
          controller: controller,
          keyboardType: keyboardType,
          onEditingComplete: null,
          decoration: InputDecoration(
              contentPadding: EdgeInsets.all(0),
              labelText: labelText,
              hintStyle: TextStyle(color: Colors.grey[400]),
              icon: icon),
          validator: validator,
          onChanged: onChanged,
          obscureText: obscureText,
          maxLines: 1,
        );
      }
    }