Focus tab bug

[IlluminatiWave]

Steps to reproduce

1. Use tab key to change the focus.

Expected results

That with focus, it works the same as without focus

Actual results

you have to tap tab 2 times to change the focus to ‘with focus’ (for some reason it loses focus to absolute nothingness).

Code sample

Code sample

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: TestFocus(),
    );
  }
}

class TestFocus extends StatefulWidget {
  const TestFocus({super.key});

  @override
  _TestFocusState createState() => _TestFocusState();
}

class _TestFocusState extends State<TestFocus> {
  final List<TextEditingController> _controllers = [];
  final List<FocusNode> _focusNodes = [];

  @override
  void initState() {
    super.initState();
    _initializeTextFields(5);
  }

  void _initializeTextFields(int count) {
    for (int i = 0; i < count; i++) {
      _controllers.add(TextEditingController());
      _focusNodes.add(FocusNode());
    }
  }

  @override
  void dispose() {
    for (var controller in _controllers) {
      controller.dispose();
    }
    for (var focusNode in _focusNodes) {
      focusNode.dispose();
    }
    super.dispose();
  }

  Widget textFieldWithFocus(BuildContext context, String chipText, int index) {
    return Row(
      children: [
        const SizedBox(width: 10),
        SizedBox(
          width: 40,
          child: Focus(
            child: TextField(
              controller: _controllers[index],
            ),
          ),
        ),
      ],
    );
  }

  Widget textFieldWithoutFocus(
      BuildContext context, String chipText, int index) {
    return Row(
      children: [
        const SizedBox(width: 10),
        SizedBox(
          width: 40,
          child: TextField(
            controller: _controllers[index],
          ),
        ),
      ],
    );
  }

  Widget text(String string) {
    return Text(
      string,
      style: const TextStyle(
        fontSize: 18,
        fontWeight: FontWeight.bold,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Test focus'),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          text('    With Focus'),
          Row(
            children: List.generate(
                5, (index) => textFieldWithFocus(context, 'Chip$index', index)),
          ),
          const SizedBox(
            height: 24,
          ),
          text('    Without Focus'),
          Row(
            children: List.generate(5,
                (index) => textFieldWithoutFocus(context, 'Chip$index', index)),
          ),
        ],
      ),
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

bookingapp.2024-05-24.02-51-42.mp4

Logs

Logs

log.txt

Flutter Doctor output

Doctor output

[√] Flutter (Channel stable, 3.22.0, on Microsoft Windows [Versión 10.0.26200.5001], locale es-MX)
    • Flutter version 3.22.0 on channel stable at C:\Apps\Desarrollo\Flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 5dcb86f68f (2 weeks ago), 2024-05-09 07:39:20 -0500
    • Engine revision f6344b75dc
    • Dart version 3.4.0
    • DevTools version 2.34.3

[√] Windows Version (Installed version of Windows is version 10 or higher)

[√] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
    • Android SDK at C:\Users\mauro\AppData\Local\Android\sdk
    • Platform android-32, build-tools 32.1.0-rc1
    • Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java
    • Java version OpenJDK Runtime Environment (build 17.0.9+0--11185874)
    • All Android licenses accepted.

[X] Chrome - develop for the web (Cannot find Chrome executable at .\Google\Chrome\Application\chrome.exe)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.

[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.10.0)
    • Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
    • Visual Studio Community 2022 version 17.10.34916.146
    • Windows 10 SDK version 10.0.22621.0

[√] Android Studio (version 2023.2)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.9+0--11185874)

[√] VS Code (version 1.89.1)
    • VS Code at C:\Users\mauro\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.88.0

[√] Connected device (2 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Versión 10.0.26200.5001]
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 126.0.2592.11

[√] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.

[darshankawar]

Thanks for the report. This is more noticeable in web and desktop platforms. The first Textfield is wrapped with Focus widget and if I understand correctly, it is designed in a way that when it loses focus before moving forward is to check if there's an API call or a validation error. You can read more about the Focus and textfield here to see if it helps further in your case or not.

[IlluminatiWave]

I found the problem, focus gains focus when using the tab key, this can be repeated indefinitely with the following example

Widget textFieldWithFocus(BuildContext context, String chipText, int index) {
    return Row(
      children: [
        const SizedBox(width: 10),
        SizedBox(
          width: 40,
          child: Focus(
            child: Focus( // add an extra focus
            child: TextField(
              controller: _controllers[index],
            )
            ),
          ),
        ),
      ],
    );
  }

the more focus you have, the more tab key are required to access the next element (in this example need 3 tab key pressed).

so, the error comes from the fact that the focus method itself is able to intercept the focus when the tab key is used.

which causes the following scenario (where each > is a tab)

Textfield > focus > textfield > focus > textfield > focus > textfield > focus....

while the version without focus does not have this error due to the lack of focus, and therefore acts normally.

textfield > textfield > textfield...

[darshankawar]

Thanks for the updates. Is there a way for you to check how the native behavior is using Focus + tab key ? Is it similar to what we are seeing here or different ?