searchfield icon indicating copy to clipboard operation
searchfield copied to clipboard

Up/down arrow key not work when using keyboard navigate.

Open shilkazx opened this issue 7 months ago • 4 comments

Describe the bug OS: ArchLinux x86_64 Flutter: v3.29.0 SearchField: v1.2.6

I can not use up/down key navigate through the suggestions, Enter key works perfect and mouse tap is ok either.

To Reproduce Steps to reproduce the behavior:

  1. Go to input field, input something that make suggestion drop down list have multiple items.
  2. Using up/down arrow key to navigate throught the item list, but not work.
  3. See error

[ x] By clicking this checkbox, I confirm I am using the latest version of the package found on pub.dev/searchfield

Expected behavior A clear and concise description of what you expected to happen. up/down arrow key should work properly.

Actual behavior up/down arrow key not work

Screenshots If applicable, add screenshots to help explain your problem.

Code sample

Show code sample
class ContractSearch extends StatefulWidget {
  final Function(Contract) onChanged;
  const ContractSearch({super.key, required this.onChanged});

  @override
  State<ContractSearch> createState() => _ContractSearchState();
}

class _ContractSearchState extends State<ContractSearch> {
  final List<Contract> _contracts = [];
  SearchFieldListItem<Contract>? _selectedValue;

  final FocusNode _focus = FocusNode();

  Future<void> _getContracts() async {
    _contracts.clear();
    _contracts.addAll((await Contract.contractMap).values);
  }

  SearchFieldListItem<Contract> _searchChild(Contract e) => SearchFieldListItem<Contract>(
    e.name,
    item: e,
    child: Row(
        children: [
          Text(e.symbol, style: FlutterFlowTheme.of(context).bodySmall,),
          Text('    ${e.name}', style: FlutterFlowTheme.of(context).bodyLarge,)
        ]
      ),
  );

  @override
  void initState() {
    super.initState();
    _getContracts();
  }

  @override
  void dispose() {
    _focus.dispose(); 
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SearchField<Contract>(
      focusNode: _focus,
      suggestions: _contracts.map((e) => _searchChild(e)).toList(),
      selectedValue: _selectedValue,
      onSuggestionTap: (SearchFieldListItem<Contract> c) {
        setState(() {
          _selectedValue = c;
          if (c.item != null) {
            widget.onChanged(c.item!);
          }
        });
      },
      onSearchTextChanged: (query) {
        var filteredContracts = _contracts.where((c) =>
          c.name.contains(query.toLowerCase()) ||
          c.symbol.toLowerCase().contains(query.toLowerCase()) ||
          c.pinyin.contains(query.toLowerCase())
        ).toList();
        return filteredContracts.map((e) => _searchChild(e)).toList();
      },
    );
  }
} 

Additional context Add any other context about the problem here.

shilkazx avatar Mar 26 '25 14:03 shilkazx