maheshj01 / searchfield

A highly customizable simple and easy to use flutter Widget to add a searchfield to your Flutter Application.This Widget allows you to search and select from list of suggestions.
MIT License
84 stars 64 forks source link

keyboard issue while closing #190

Open sabari7320 opened 1 week ago

sabari7320 commented 1 week ago

Describe the bug When I select a value from the dropdown and then close the keyboard, the selected value disappears, and the dropdown list resets to its initial state

SearchField(
autovalidateMode: AutovalidateMode.onUserInteraction,
onTapOutside: null,
        focusNode: _otherTextFieldFocusNode,
          suggestionStyle: TextStyle(decoration: TextDecoration.none),
          searchInputDecoration: SearchInputDecoration(
            border: InputBorder.none,
            labelText: 'State',
            enabledBorder: OutlineInputBorder(
                borderSide: BorderSide(color: Colors.grey),
                borderRadius: BorderRadius.circular(10)),
            focusedBorder: OutlineInputBorder(
                borderSide: BorderSide(color: Colors.grey),
                borderRadius: BorderRadius.circular(10)),
            disabledBorder: OutlineInputBorder(
                borderSide: BorderSide(color: Colors.grey),
                borderRadius: BorderRadius.circular(10)),
            errorBorder: OutlineInputBorder(
                borderSide: BorderSide(color: Colors.red),
                borderRadius: BorderRadius.circular(10)),
            focusedErrorBorder:OutlineInputBorder(
                borderSide: BorderSide(color: Colors.red),
                borderRadius: BorderRadius.circular(10)),
            hintStyle: TextStyle(color: Colors.black),
            contentPadding: const EdgeInsets.symmetric(vertical: 1.0, horizontal: 15),
          ),

          onSuggestionTap: (selectedValue) {
            print("Selected state: ${selectedValue.item}");
            stateController.text = selectedValue.item!;
            fetchCityList(countryController.text, selectedValue.item!);
            FocusScope.of(context).unfocus();
          },
          suggestions: stateList.isEmpty
          ? [SearchFieldListItem("No state available", child: Text("No state available"))]
              :stateList.map((state) => SearchFieldListItem(
            state,
            item: state,
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text(state),
            ),
          ))
              .toList(),
          itemHeight: 55,
          maxSuggestionsInViewPort: 4,
          controller: stateController,
          validator: (selectedValue) {
            if (selectedValue == null || !stateList.contains(selectedValue)) {
              return 'Please select State';
            }
            return null;
          },
        ),

https://github.com/user-attachments/assets/a47c1552-0ca4-45dd-978d-83526076b2ca

maheshj01 commented 1 week ago

Hi @sabari7320, I tried to reproduce the bug using the below code sample, But I am unable to reproduce it. Please provide more details

  1. version of searchfield
  2. output of flutter doctor -v
  3. is this reproducible on a specific device or all devices?
  4. is this reproducible in debug/release or both

It would be great if you can try to modify the below code sample and provide a reproducible code sample with steps to reproduce the issue.

code sample ```dart // import 'package:example/pagination.dart'; import 'package:flutter/material.dart'; import 'package:searchfield/searchfield.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); // This widget is the root of your application. @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: SearchFieldSample(), debugShowCheckedModeBanner: false, ); } } class SearchFieldSample extends StatefulWidget { const SearchFieldSample({Key? key}) : super(key: key); @override State createState() => _SearchFieldSampleState(); } class _SearchFieldSampleState extends State { @override void initState() { suggestions = [ 'United States', 'Germany', 'Canada', 'United Kingdom', 'France', 'Italy', 'Spain', 'Australia', 'India', 'China', 'Japan', 'Brazil', 'South Africa', 'Mexico', 'Argentina', 'Russia', 'Indonesia', 'Turkey', 'Saudi Arabia', 'Nigeria', 'Egypt', ]; selected = suggestions[0]; super.initState(); } int suggestionsCount = 12; final _otherTextFieldFocusNode = FocusNode(); final TextEditingController searchController = TextEditingController(); var suggestions = []; int counter = 0; var selected = ''; @override Widget build(BuildContext context) { Widget searchChild(x, {bool isSelected = false}) => Padding( padding: const EdgeInsets.symmetric(horizontal: 12), child: Text(x, style: TextStyle( fontSize: 18, color: isSelected ? Colors.green : Colors.black)), ); return Scaffold( appBar: AppBar(title: Text('Searchfield Demo')), body: Padding( padding: const EdgeInsets.all(8.0), child: Column( children: [ Spacer(), SearchField( autovalidateMode: AutovalidateMode.onUserInteraction, onTapOutside: null, focusNode: _otherTextFieldFocusNode, suggestionStyle: TextStyle(decoration: TextDecoration.none), searchInputDecoration: SearchInputDecoration( border: InputBorder.none, labelText: 'State', enabledBorder: OutlineInputBorder( borderSide: BorderSide(color: Colors.grey), borderRadius: BorderRadius.circular(10)), focusedBorder: OutlineInputBorder( borderSide: BorderSide(color: Colors.grey), borderRadius: BorderRadius.circular(10)), disabledBorder: OutlineInputBorder( borderSide: BorderSide(color: Colors.grey), borderRadius: BorderRadius.circular(10)), errorBorder: OutlineInputBorder( borderSide: BorderSide(color: Colors.red), borderRadius: BorderRadius.circular(10)), focusedErrorBorder: OutlineInputBorder( borderSide: BorderSide(color: Colors.red), borderRadius: BorderRadius.circular(10)), hintStyle: TextStyle(color: Colors.black), contentPadding: const EdgeInsets.symmetric(vertical: 1.0, horizontal: 15), ), onSuggestionTap: (selectedValue) {}, suggestions: suggestions.isEmpty ? [ SearchFieldListItem("No state available", child: Text("No state available")) ] : suggestions .map((state) => SearchFieldListItem( state, item: state, child: Padding( padding: const EdgeInsets.all(8.0), child: Text(state), ), )) .toList(), itemHeight: 55, maxSuggestionsInViewPort: 4, validator: (selectedValue) { if (selectedValue == null || !suggestions.contains(selectedValue)) { return 'Please select State'; } return null; }, ), SizedBox(height: 100), ], ), )); } } ```
sunilpandit2 commented 5 days ago

i am facing same issue

maheshj01 commented 5 days ago

@sunilpandit2 Can you provide the information requested above? It will help me investigate the issue

sabari7320 commented 3 days ago

if i click the back button again the same values appear in my mobile

maheshj01 commented 3 days ago

@sabari7320 can you provide this info ?

maheshj01 commented 3 days ago

@sabari7320 Can you try the latest release v1.1.9

maheshj01 commented 2 hours ago

@sabari7320 Before I merge #191 Can you try this out on your end and see if this also fixes your issue?

 searchfield:
    git:
      url: https://github.com/maheshmnj/searchfield.git
      ref: breaking-design