Autocomplete Widget Selection Not Working with Keyboard in Flutter App

Question

Steps to reproduce

1. Run the provided Flutter application.
2. Focus on the Autocomplete widget's TextField.
3. Start typing to filter options, e.g., "Col".
4. Use the keyboard (arrow keys) to select one of the filtered options, e.g., "Collections".
5. Press Enter or Tab to select the highlighted option.

Expected results

The TextField should update to show the selected option ("Collections").

Actual results

The TextField does not update with the selected option when using keyboard selection, though it works as expected when selecting with a mouse.

Additional Information

This issue has been tested and reproduced on both macOS and Chrome web app. I have tried various workarounds, including explicitly setting the TextEditingController's text within the onSelected callback, but the issue persists specifically with keyboard selections. I would appreciate any guidance on resolving this issue or information about whether this is a known problem with a forthcoming fix. Thank you for your time and assistance.

Code sample

Code sample

Run the code on Zapp.run

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter App!!',
      theme: ThemeData(
        colorSchemeSeed: Colors.indigo,
        useMaterial3: true,
        brightness: Brightness.light,
      ),
      darkTheme: ThemeData(
        colorSchemeSeed: Colors.blue,
        useMaterial3: true,
        brightness: Brightness.dark,
      ),
      home: const MyHomePage(title: 'Flutter Example App'),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});


  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> myList = ["Collections", "Records", "Stream API"];
  late TextEditingController textEditingController = TextEditingController(); 
  @override
  Widget build(BuildContext context) {
    
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Autocomplete<String>(
        optionsBuilder: (TextEditingValue textEditingValue){
          if(textEditingValue.text == ''){
            return const Iterable<String>.empty();
          }
          return myList.where((String options){
            return options.toLowerCase().contains(textEditingValue.text.toLowerCase());
          });
        },
        onSelected: (String selection){
          setState(() {
                      textEditingController.text = selection;
          });
        },
        fieldViewBuilder: (BuildContext context,
            TextEditingController textEditingController,
            FocusNode focusNode,
            VoidCallback onFieldSubmitted) {
          textEditingController.text = textEditingController.text;
          return TextField(
            controller: textEditingController,
            focusNode: focusNode,
          );
        },
      )
    );
  }
}

Answer 1

Looks like you missed to call the VoidCallback from the TextField Widget, calling it onSubmitting solves the issue. I have forked your code and added the result

TextField(
        controller: textEditingController,
        focusNode: focusNode,
        onSubmitted: (String selection)=>  onFieldSubmitted(),
      );