Flutter Web中Autocomplete选择值后保持键盘焦点的问题

在使用Flutter Web的Autocomplete组件时，通过键盘（Enter键）选择选项后焦点丢失、键盘导航重置的问题，是因为默认实现没有在选项选择后将焦点返还给输入框。以下是针对该问题的修复方案：

修复步骤 #

• 创建FocusNode实例，用于控制Autocomplete输入框的焦点状态
• 将FocusNode绑定到Autocomplete组件
• 在onSelected回调中手动调用requestFocus()，让焦点回到输入框

修改后的完整代码 #

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

  @override
  State<MyAutocompletePage> createState() => _MyAutocompletePageState();
}

class _MyAutocompletePageState extends State<MyAutocompletePage> {
  final FocusNode _autocompleteFocusNode = FocusNode();

  @override
  void dispose() {
    // 销毁FocusNode避免内存泄漏
    _autocompleteFocusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ElevatedButton(
          onPressed: () {},
          child: const Text("Button1"),
        ),
        Autocomplete<String>(
          focusNode: _autocompleteFocusNode,
          optionsBuilder: (TextEditingValue value) {
            return ["ABC", "DEF"];
          },
          onSelected: (String selection) {
            // 选择选项后强制将焦点返回输入框
            _autocompleteFocusNode.requestFocus();
          },
        ),
        ElevatedButton(
          onPressed: () {},
          child: const Text("Button2"),
        ),
      ],
    );
  }
}

效果说明 #

修改后，通过TAB导航到Autocomplete输入框，按下Enter选择选项后，焦点会保留在输入框中，再次按TAB会继续导航到Button2，不会重置整个页面的键盘导航顺序，符合视障用户的可访问性需求。

内容的提问来源于stack exchange，提问作者Searles