onSuggestionSelected not called in Web

[afratul-taohid]

i tried both flutter_typeahead_web and flutter_typeahead. but onSuggestionSelected not called in web..

[shadowdogg]

I also have encountered this, much to my dismay, it also seems to not select in sync with the mouse.

Going to use GestureDetector with Overlay instead I think.

[bytejutsu]

Hello did you solve this problem? @shadowdogg could you please tell us if GestureDetector with Overlay solved this issue? if yes a simple showcase is very appreciated

[shadowdogg]

@DhiaEddineNabli it does work, but i'm struggling with the logic regarding opening and closing of the overlay, as for me, change of focus does not perform correctly. I followed: https://medium.com/saugo360/https-medium-com-saugo360-flutter-using-overlay-to-display-floating-widgets-2e6d0e8decb9 (who actually is the same plugin OP) and then wrapped where it had:

      ListTile(
                  title: Text('Syria'),
                  onTap: () {
                    print('Syria Tapped');
                  },
                ),

To

      GestureDetector(
  onPanDown: (_) {
       print('Syria tapped);
 },
   child: ListTile(
           title: Text('Syria'),
                ),
),

[wterrill]

There is a workaround in #151 by user @jquintana53 that I used and it worked for me:

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
              },
           );
         },

[shadowdogg]

@wterrill I wish the author would mention this. Thanks a lot for letting me know about this.

[sjmcdowall]

This package is only tested on App programs, not Web etc. There are lots of issues with desktop/Web applications beyond what this plugin can handle.

[bytejutsu]

@shadowdogg thank you this solution worked. I didn't know GestureDetector has this onPanDown callback function which can detect mouse events. @wterrill thank you your solution works as well but I saw that many callback functions from Listener for mouse events are now deprecated somehow. Although the mouse clicks are now detected the suggestion list behaves in a way that when hovering over an element the previous list element is being highlighted while the actual one is still clicked and selected

[wterrill]

I looked more closely at @shadowdogg's answer, and I realized that I didn't understand it at first. So, just for the next guy, I'll make the code below more obvious. (it just needs to be wrapped with an itemBuilder so that it can go directly into the TypeAheadField widget):

itemBuilder: (context, String suggestion) {
            return GestureDetector(
              onPanDown: (_) {
                print(suggestion);
              },
                child: ListTile(
                  dense: true,
                  title: Text(suggestion),
                ),
             );
          },

(and, of course, by doing this, you still need the 'onSuggestionSelected' method, but you can leave it blank.

[shadowdogg]

Any advantage of doing Listener over Gesture detection?

@wterill True I probably didn't make it very clear to this example exactly.

onPanDown: (_) => this._typeAheadController.text = suggestion,

For anyone who didn't realise too, to set the text

[SeriousMonk]

I looked more closely at @shadowdogg's answer, and I realized that I didn't understand it at first. So, just for the next guy, I'll make the code below more obvious. (it just needs to be wrapped with an itemBuilder so that it can go directly into the TypeAheadField widget):

itemBuilder: (context, String suggestion) {
            return GestureDetector(
              onPanDown: (_) {
                print(suggestion);
              },
                child: ListTile(
                  dense: true,
                  title: Text(suggestion),
                ),
             );
          },

(and, of course, by doing this, you still need the 'onSuggestionSelected' method, but you can leave it blank.

onPanDown workaround makes it impossible to scroll through the suggestion list on web version of app on mobile device

[Ahmadre]

just for your information: https://pub.dev/packages/flutter_keyboard_visibility

[Ahmadre]

I already solved the error with keyboard visibility, but still: it's not working. So it's definetly an architectual error here.