typeAhead textfield in flutter web - flutter

Question

I am using the typeAhead text field for auto-completion but the onSuggestionSelected function does not work. I am using flutter web. No selection is made and listView shows am hovering over an item above the one am actually hovering.
Below is the dialog, in this case the mouse pointer is actually below 'FIN' in the listView. I am using the typeAhead field in a dialog.
This is the code below.
TypeAheadFormField(
//initialValue: 'bleh',
textFieldConfiguration: TextFieldConfiguration(
controller: _typeAheadController, //this.
decoration: InputDecoration(
hintText: 'Programme(required)' //label
)),
suggestionsCallback: (pattern) {
return programme
.where((String dc) => dc
.toLowerCase()
.contains(pattern.toLowerCase()))
.toList(); //|| dc.toLowerCase().contains(other.toLowerCase())).toList();
},
itemBuilder: (context, String suggestion) {
return ListTile(
title: Text(suggestion),
);
},
transitionBuilder:
(context, suggestionsBox, controller) {
return suggestionsBox;
},
onSuggestionSelected: (String suggestion) {
_typeAheadController.text = suggestion; //this
print(suggestion + ' selected bith');
},
validator: (value) {
if (value.isEmpty ||
programme.indexOf(value) == -1) {
return 'Please select a course offered in the university you selected!';
}
},
onSaved: (value) => this._selectedCity =
value, //<--------- upload value
)
'programme' is the list of strings returned in which string 'dc' is found. 'print(suggestion + ' selected bith');' does not print a thing to show I never actually have onSelection run at all. Anyone know a work around? thank you.
Dialog:

Answer 1

You can use 2 methods to make it workable:
Method 1:
Use GestureDetector inside itemBuilder as below.
itemBuilder: (context, String suggestion) {
return GestureDetector(
onPanDown: (_) {
print(suggestion);
},
child: ListTile(
dense: true,
title: Text(suggestion),
),
);
},
by doing this, you still need the 'onSuggestionSelected' method, but you can leave it blank.
Method 2:
itemBuilder: (context, String suggestion) {
return Listener(
child: Container(
color: Colors.black, // <-- this gets rid of the highlight that's not centered on the mouse
child: ListTile(
title: Text(suggestion),
),
),
onPointerDown: () {
print(suggestion);
// Do what you would have done in onSuggestionSelected() here
},
);
},
I got these answers from following link onSuggestionSelected not called in Web