I am trying to display a list of cities from a bloc and only when I click on the TEXT of the city itself, the STATE changes, but the selected city is not displayed in the INPUT display. In contrast, when you click outside the TEXT, the value in INPUT changes but the STATE is not updated.I want that wherever you click (in the text itself or outside) the STATE plus the value shown in INPUT will be updated. Thank you!.
SearchField<String>(
suggestions: state.citiesDataList
.map((city) => SearchFieldListItem<String>(
city.Name!,
child: GestureDetector(
onTap: () => {
debugPrint("onTap1"),
context
.read<AddressBloc>()
.add(AddressChosenEvent(city.Name!)),
_onChangeCityPressed(city.Name)
},
child: Row(
children: [
const SizedBox(width: 10),
Text(city.Name!),
],
),
),
))
.toList(),
itemHeight: 50,
suggestionState: Suggestion.expand,
onSearchTextChanged: (value) {
final filteredSuggestions = state.citiesDataList
.where((city) => city.Name!.contains(value))
.toList()
.take(50);
return filteredSuggestions
.map((city) => SearchFieldListItem<String>(
city.Name!,
child: GestureDetector(
onTap: () => {
debugPrint("onTap2"),
context
.read<AddressBloc>()
.add(AddressChosenEvent(city.Name!)),
_onChangeCityPressed(city.Name),
},
child: Row(
children: [
const SizedBox(width: 10),
Text(city.Name!),
],
),
),
))
.toList();
},
hint: state is CityChosenState ? state.city : 'type city',
searchInputDecoration: InputDecoration(
hintStyle:
const TextStyle(fontSize: 18, color: Colors.orange),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(24),
borderSide: const BorderSide(
width: 1,
color: Colors.orange,
style: BorderStyle.solid,
),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(24),
borderSide: const BorderSide(
width: 1,
color: Colors.black,
style: BorderStyle.solid,
),
),
),
textInputAction: TextInputAction.next,
)