当我在 Flutter Web 中的 TextField 中按空格键时，如何防止 PopupMenu 消失？

Question

Here's the snippet of the code in the PopupMenuButton (in Flutter Web):

PopupMenuButton(
   offset: Offset(100, 100),
   elevation: 5.0,
   child: ListTile(
   dense: true,
   leading: Icon(
      Icons.filter_vintage,
      size: 16,
     ),
   title: Text('Menu'),

   itemBuilder: (context) => [
       PopupMenuItem(child: Container(
           padding: EdgeInsets.all(20.0),
           child: TextField(
              autofocus: true,
              cursorColor: kLeadingOrangeColor,
              style: kFilterButtonTextStyle,      
              onChanged: (input) => searchNameString = input,
              onEditingComplete: onEditingCompleteCallBack,
              controller: searchController,
         )),
       ]),

Then here is the short recording. Notice the PopupMenu disappeared when I press

So the problem is that every time I pressed space bar, the PopupMenu disappear. What I need is the PopupMenu persisted until I press or click somewhere else. Anyone knows where might be the problem?

Here is my flutter doctor :

[✓] Flutter (Channel master, 1.20.0-7.0.pre, on Mac OS X 10.15.5 19F101, locale en-US)
 
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 11.5)
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.0)
[✓] VS Code (version 1.47.0)
[✓] Connected device (2 available)

• No issues found!

Answer 1

I have found the solution.

The problem is with the handleTap method in the PopupMenuItem class.

 @protected
  void handleTap() {
    Navigator.pop<T>(context, widget.value);
  }

So what I did was:

1. Copy the whole class of PopupMenuItem
2. Rename it something else. (eg: TextFieldPopupMenuItem )
3. Change the handleTap method to:

 @protected
  void handleTap() {}

4. Use this new class for the text fields.

Then it works!

I think it is because of the abstraction of what we can put inside PopupMenuItem , it is hard to determine which input can be taken to dismiss it. However, since I'm using hard keyboard, I think it is not supposed to detect it as a 'tap', but maybe it is up to the Flutter team.

Anyway, this work around works.

Hope it will help someone.