[Bug] Focus is not properly handled

[tddang-linagora]

Steps to reproduce

1. Run the code on Web
2. Press "Tab" several times

Expected results

Either

• Move the focus to each suggestions, and when the focus reaches the last suggestion, move to the next TextField or
• Move the focus to the next TextField right away

Actual results

The Focus gets stuck somewhere in between and returns to the first TextField.

Package Version

5.2.0

Platform

Web

Code sample

Code sample

import 'package:flutter/material.dart';
import 'package:flutter_typeahead/flutter_typeahead.dart';

void main() => runApp(const MaterialApp(home: TabDemo()));

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

  @override
  State<TabDemo> createState() => _TabDemoState();
}

class _TabDemoState extends State<TabDemo> {
  final focusNode1 = FocusNode();
  final focusNode2 = FocusNode();
  final controller1 = TextEditingController();
  final controller2 = TextEditingController();

  @override
  void dispose() {
    focusNode1.dispose();
    focusNode2.dispose();
    controller1.dispose();
    controller2.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Tab Demo')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TypeAheadField<String>(
              itemBuilder: (context, value) => Text(value),
              onSelected: (value) => controller1.text = value,
              suggestionsCallback: (s) => ['abc', 'bc', 'c'],
              emptyBuilder: (context) => const SizedBox(),
              controller: controller1,
              focusNode: focusNode1,
              builder: (context, controller, focusNode) => TextField(
                controller: controller,
                focusNode: focusNode,
                autofocus: true,
              ),
            ),
            TypeAheadField<String>(
              itemBuilder: (context, value) => Text(value),
              onSelected: (value) => controller2.text = value,
              suggestionsCallback: (s) => ['abc', 'bc', 'c'],
              controller: controller2,
              focusNode: focusNode2,
              builder: (context, controller, focusNode) => TextField(
                controller: controller,
                focusNode: focusNode,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Logs

No response

Screenshots or Video

Screenshots / Video demonstration

Screen.Recording.2024-10-21.at.15.27.49.mov

[tddang-linagora]

Also reproducible on master branch

[tobiasbentin]

For me it is working when wrapping the TypeAheadFields with a Row instead of a Column...really weird. Any updates to that?

Edit:
After digging a bit I found following setup working for me:

FocusTraversalGroup(
     policy: WidgetOrderTraversalPolicy(),
     child: Column(
         children: [
             TypeAheadField....
             TypeAheadField....
         ],
       ...

Hope it works for you too @tddang-linagora

[tddang-linagora]

@tobiasbentin Thank you, it works now.

Before closing this issue, it'll be best if either:

• This additional FocusTraversalGroup is documented or
• The problem is fixed so that focus traversal works without additional FocusTraversalGroup.

[dorklein]

The problem with WidgetOrderTraversalPolicy() is it breaks reading order.

FocusTraversalGroup(
     policy: WidgetOrderTraversalPolicy(),
     child: ...
)

When wrapping the TypeAhead widget in a LayoutBuilder, the traversal order gets very weird.
Because WidgetOrderTraversalPolicy() is A FocusTraversalPolicy that traverses the focus order in widget hierarchy order.

[clragon]

Duplicate of #579