Flutter form navigation with tab -- how to avoid unwanted whitespace when switching form fields

Question

I'm trying to understand form input in flutter - and how to navigate between fields with the tab key. An example on the Internet recommended the following pattern:

However, when Tab is pressed while entering text in the first field, the text of first field has the tab whitespace added to the text. Seems I'm doing flutter wrong, or there's a bug in Flutter (it clearly should be the library's responsibility to cut tab from form text when tab changes context, no?)

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      title: 'My app', // used by the OS task switcher
      home: Material(child: content())));
}

Widget content() {
  var _focus1 = FocusNode();
  var _focus2 = FocusNode();

  return Column(
    children: [
      TextField(
        focusNode: _focus1,
        textInputAction: TextInputAction.next,
      ),
      TextField(
        focusNode: _focus2,
        textInputAction: TextInputAction.next,
      ),
    ],
  );
}

are u talking about flutter web ? i mean tab can be pressed in web right ? — Aman Malhotra, Dec 16 '19 at 19:59
https://stackoverflow.com/a/52151733/7940500 maybe this is what u r looking for — Aman Malhotra, Dec 16 '19 at 20:06

score 0 · Answer 1 · answered Dec 16 '19 at 20:06

0

I don't know why textInputAction is not work but I code a solution here:

    import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      title: 'My app', // used by the OS task switcher
      home: Material(child: Test())));
}

class Test extends StatelessWidget {
  var _focus1 = FocusNode();
  var _focus2 = FocusNode();
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(
          focusNode: _focus1,
          textInputAction: TextInputAction.next,
          onSubmitted: (_) => FocusScope.of(context).requestFocus(_focus2),
        ),
        TextField(
          focusNode: _focus2,
          textInputAction: TextInputAction.next,
        ),
      ],
    );
  }
}

answered Dec 16 '19 at 20:06

furkeen

411
5
11

It has the same problem. If you type "1234" the input field contains the whitespace in its text. This is not the normal behavior of input field (tab changes focus only, and is not entered as text). – user48956 Dec 16 '19 at 20:43
I think it is normal because in android emulator tab only means white space. Are you seeing tab button in emulator keyboard? – furkeen Dec 16 '19 at 20:45
No, but Android device allow external keyboards with tab keys. – user48956 Dec 16 '19 at 20:46
Yes I know but in production version of the app don't allow tab button for user of application. That means using tab button for focus next input is no sense. – furkeen Dec 16 '19 at 20:49
Really - how can accessibility work without switching input focus? – user48956 Dec 16 '19 at 20:51
if your main aim is about accesibilty you should be Clear in your question because there is different structure. I suggest this article for solution. https://medium.com/flutter-community/a-deep-dive-into-flutters-accessibility-widgets-eb0ef9455bc – furkeen Dec 16 '19 at 20:59
Either way -- physical keyboard input for forms seems like a valid feature. – user48956 Dec 16 '19 at 20:59

Flutter form navigation with tab -- how to avoid unwanted whitespace when switching form fields

1 Answers1