Steps to reproduce
- Run the provided Flutter application.
- Focus on the Autocomplete widget's TextField.
- Start typing to filter options, e.g., "Col".
- Use the keyboard (arrow keys) to select one of the filtered options, e.g., "Collections".
- 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 sampleimport '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,
);
},
)
);
}
}